First set of proposed UI tweaks.

getfider · Sep 19, 2024 · b1195a9 · b1195a9
1 parent b2c1311
commit b1195a9
Show file tree

Hide file tree

Showing 17 changed files with 143 additions and 114 deletions.
diff --git a/public/assets/styles/reset.scss b/public/assets/styles/reset.scss
@@ -16,7 +16,7 @@ body {
   overflow-x: hidden;
   min-width: 320px;
   color: get("colors.gray.900");
-  background-color: get("colors.white");
+  background-color: get("colors.gray.100");
   font-size: get("font.size.base");
   font-family: $font-base;
 }

diff --git a/public/assets/styles/utility/display.scss b/public/assets/styles/utility/display.scss
@@ -63,6 +63,13 @@
   }
 }
 
+.box {
+  border-radius: get("border.radius.large");
+  background-color: get("colors.white");
+  border: 1px solid get("colors.gray.200");
+  padding: spacing(4);
+}
+
 .flex {
   display: flex;
 }

diff --git a/public/assets/styles/variables/_text.scss b/public/assets/styles/variables/_text.scss
@@ -1,4 +1,4 @@
-$font-base: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
+$font-base: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif,
   "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 $font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 

diff --git a/public/components/Header.tsx b/public/components/Header.tsx
@@ -16,7 +16,7 @@ export const Header = () => {
   const hideModal = () => setIsSignInModalOpen(false)
 
   return (
-    <div id="c-header">
+    <div id="c-header" className="bg-white">
       <SignInModal isOpen={isSignInModalOpen} onClose={hideModal} />
       <HStack className="c-menu shadow p-2 w-full">
         <div className="container">

diff --git a/public/components/NotificationIndicator.tsx b/public/components/NotificationIndicator.tsx
@@ -21,7 +21,7 @@ export const NotificationIndicator = () => {
   }, [fider.session.isAuthenticated])
 
   return (
-    <a href="/notifications" className="c-notification-indicator">
+    <a href="/notifications" className="c-notification-indicator mr-3">
       <Icon sprite={IconBell} className="h-6 text-gray-500" />
       {unreadNotifications > 0 && <div className="c-notification-indicator-unread-counter" />}
     </a>

diff --git a/public/components/common/PoweredByFider.tsx b/public/components/common/PoweredByFider.tsx
@@ -21,7 +21,7 @@ export const PoweredByFider = (props: PoweredByFiderProps) => {
   return (
     <div className={className}>
       <a rel="noopener" href={`https://fider.io?utm_source=${source}&utm_medium=${medium}&utm_campaign=${campaign}`} target="_blank">
-        Powered by Fider
+        Powered by Fider ⚡
       </a>
     </div>
   )

diff --git a/public/components/layout/Stack.tsx b/public/components/layout/Stack.tsx
@@ -12,7 +12,7 @@ interface StackProps {
 }
 
 const Stack = (props: StackProps, dir: "x" | "y") => {
-  const spacing = props.spacing === undefined ? 1 : props.spacing
+  const spacing = props.spacing === undefined ? 2 : props.spacing
   const className = classSet({
     [`${props.className}`]: props.className,
     flex: true,

diff --git a/public/pages/Administration/components/AdminBasePage.tsx b/public/pages/Administration/components/AdminBasePage.tsx
@@ -17,7 +17,7 @@ export const AdminPageContainer = (props: AdminPageContainerProps) => {
   return (
     <>
       <Header />
-      <div id={props.id} className="page container">
+      <div id={props.id} className="page container box my-5">
         <HStack justify="between">
           <PageTitle title={props.title} subtitle={props.subtitle} />
           <SideMenuToggler />

diff --git a/public/pages/Home/Home.page.scss b/public/pages/Home/Home.page.scss
@@ -14,13 +14,22 @@
 
   .p-home {
     &__welcome-col {
-      background-color: get("colors.gray.100");
-      padding: spacing(2);
-      border-radius: get("border.radius.medium");
+      > :first-child {
+        background-color: get("colors.white");
+        border-radius: get("border.radius.large");
+        border: 1px solid get("colors.gray.200");
+
+        @include media("lg") {
+        }
+      }
+    }
+
+    &__posts-col {
+      background-color: get("colors.white");
+      border-radius: get("border.radius.large");
+      border: 1px solid get("colors.gray.200");
 
       @include media("lg") {
-        padding: 0;
-        background-color: transparent;
       }
     }
 

diff --git a/public/pages/Home/Home.page.tsx b/public/pages/Home/Home.page.tsx
@@ -77,13 +77,13 @@ What can we do better? This is the place for you to vote, discuss and share idea
       <Header />
       <div id="p-home" className="page container">
         <div className="p-home__welcome-col">
-          <VStack spacing={2}>
+          <VStack spacing={2} className="p-4">
             <Markdown text={fider.session.tenant.welcomeMessage || defaultWelcomeMessage} style="full" />
             <PostInput placeholder={fider.session.tenant.invitation || defaultInvitation} onTitleChanged={setTitle} />
-            <PoweredByFider slot="home-input" className="sm:hidden md:hidden lg:block" />
           </VStack>
+          <PoweredByFider slot="home-input" className="sm:hidden md:hidden lg:block mt-3" />
         </div>
-        <div className="p-home__posts-col">
+        <div className="p-home__posts-col p-4">
           {isLonely() ? (
             <Lonely />
           ) : title ? (

diff --git a/public/pages/Home/components/TagsFilter.tsx b/public/pages/Home/components/TagsFilter.tsx
@@ -32,7 +32,9 @@ export const TagsFilter = (props: TagsFilterProps) => {
 
   return (
     <HStack>
-      <Trans id="home.tagsfilter.label.with">with</Trans>
+      <span>
+        <Trans id="home.tagsfilter.label.with">with</Trans>
+      </span>
       <Dropdown renderHandle={<div className="text-medium text-xs uppercase rounded-md uppercase bg-gray-100 px-2 py-1">{label}</div>}>
         {props.tags.map((t) => (
           <Dropdown.ListItem onClick={toggle(t)} key={t.id}>

diff --git a/public/pages/MySettings/MySettings.page.tsx b/public/pages/MySettings/MySettings.page.tsx
@@ -112,7 +112,7 @@ export default class MySettingsPage extends React.Component<MySettingsPageProps,
     return (
       <>
         <Header />
-        <div id="p-my-settings" className="page container">
+        <div id="p-my-settings" className="page container box my-4">
           <Modal.Window isOpen={this.state.showModal} onClose={this.closeModal}>
             <Modal.Header>
               <Trans id="modal.changeemail.header">Confirm your new email</Trans>

diff --git a/public/pages/ShowPost/ShowPost.page.scss b/public/pages/ShowPost/ShowPost.page.scss
@@ -9,23 +9,30 @@
     .p-show-post {
       display: grid;
       gap: spacing(4);
-      grid-template-columns: 1fr 1fr 1fr 1fr;
+      grid-template-columns: 1fr 3fr;
       grid-template-rows: auto;
       grid-template-areas:
-        "Header Header Header Action"
-        "Discussion Discussion Discussion Action";
+        "Action Main"
+        "Action Main";
+
+      &__main-col {
+        grid-area: Main;
+        background-color: get("colors.white");
+        padding: spacing(4);
+        border-radius: get("border.radius.large");
+      }
 
       &__header-col {
-        grid-area: Header;
       }
 
       &__action-col {
+        > :first-child {
+          background-color: get("colors.white");
+          padding: spacing(4);
+          border-radius: get("border.radius.large");
+        }
         grid-area: Action;
       }
-
-      &__discussion_col {
-        grid-area: Discussion;
-      }
     }
   }
 }
diff --git a/public/pages/ShowPost/ShowPost.page.tsx b/public/pages/ShowPost/ShowPost.page.tsx
@@ -145,102 +145,105 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
       <>
         <Header />
         <div id="p-show-post" className="page container">
-          <VStack className="p-show-post" spacing={4}>
-            <div className="p-show-post__header-col">
-              <VStack spacing={4}>
-                <HStack>
-                  <VoteCounter post={this.props.post} />
+          <div className="p-show-post">
+            <div className="p-show-post__main-col">
+              <div className="p-show-post__header-col">
+                <VStack spacing={4}>
+                  <HStack>
+                    <VoteCounter post={this.props.post} />
+
+                    <div className="flex-grow">
+                      {this.state.editMode ? (
+                        <Form error={this.state.error}>
+                          <Input field="title" maxLength={100} value={this.state.newTitle} onChange={this.setNewTitle} />
+                        </Form>
+                      ) : (
+                        <h1 className="text-display2">{this.props.post.title}</h1>
+                      )}
 
-                  <div className="flex-grow">
+                      <span className="text-muted">
+                        <Trans id="showpost.label.author">
+                          Posted by <UserName user={this.props.post.user} /> &middot; <Moment locale={Fider.currentLocale} date={this.props.post.createdAt} />
+                        </Trans>
+                      </span>
+                    </div>
+                  </HStack>
+                  <VStack>
+                    <span className="text-category">
+                      <Trans id="label.description">Description</Trans>
+                    </span>
                     {this.state.editMode ? (
                       <Form error={this.state.error}>
-                        <Input field="title" maxLength={100} value={this.state.newTitle} onChange={this.setNewTitle} />
+                        <TextArea field="description" value={this.state.newDescription} onChange={this.setNewDescription} />
+                        <MultiImageUploader field="attachments" bkeys={this.props.attachments} maxUploads={3} onChange={this.setAttachments} />
                       </Form>
                     ) : (
-                      <h1 className="text-display2">{this.props.post.title}</h1>
+                      <>
+                        {this.props.post.description && <Markdown className="description" text={this.props.post.description} style="full" />}
+                        {!this.props.post.description && (
+                          <em className="text-muted">
+                            <Trans id="showpost.message.nodescription">No description provided.</Trans>
+                          </em>
+                        )}
+                        {this.props.attachments.map((x) => (
+                          <ImageViewer key={x} bkey={x} />
+                        ))}
+                      </>
                     )}
-
-                    <span className="text-muted">
-                      <Trans id="showpost.label.author">
-                        Posted by <UserName user={this.props.post.user} /> &middot; <Moment locale={Fider.currentLocale} date={this.props.post.createdAt} />
-                      </Trans>
-                    </span>
-                  </div>
-                </HStack>
-                <VStack>
-                  <span className="text-category">
-                    <Trans id="label.description">Description</Trans>
-                  </span>
-                  {this.state.editMode ? (
-                    <Form error={this.state.error}>
-                      <TextArea field="description" value={this.state.newDescription} onChange={this.setNewDescription} />
-                      <MultiImageUploader field="attachments" bkeys={this.props.attachments} maxUploads={3} onChange={this.setAttachments} />
-                    </Form>
-                  ) : (
-                    <>
-                      {this.props.post.description && <Markdown className="description" text={this.props.post.description} style="full" />}
-                      {!this.props.post.description && (
-                        <em className="text-muted">
-                          <Trans id="showpost.message.nodescription">No description provided.</Trans>
-                        </em>
-                      )}
-                      {this.props.attachments.map((x) => (
-                        <ImageViewer key={x} bkey={x} />
-                      ))}
-                    </>
-                  )}
+                  </VStack>
+                  <ShowPostResponse status={this.props.post.status} response={this.props.post.response} />
                 </VStack>
-                <ShowPostResponse status={this.props.post.status} response={this.props.post.response} />
-              </VStack>
-            </div>
+              </div>
 
-            <VStack spacing={4} className="p-show-post__action-col">
-              <VotesPanel post={this.props.post} votes={this.props.votes} />
-
-              {Fider.session.isAuthenticated && canEditPost(Fider.session.user, this.props.post) && (
-                <VStack>
-                  <span key={0} className="text-category">
-                    <Trans id="label.actions">Actions</Trans>
-                  </span>
-                  {this.state.editMode ? (
-                    <VStack>
-                      <Button variant="primary" onClick={this.saveChanges} disabled={Fider.isReadOnly}>
-                        <Icon sprite={IconCheck} />{" "}
-                        <span>
-                          <Trans id="action.save">Save</Trans>
-                        </span>
-                      </Button>
-                      <Button onClick={this.cancelEdit} disabled={Fider.isReadOnly}>
-                        <Icon sprite={IconX} />
-                        <span>
-                          <Trans id="action.cancel">Cancel</Trans>
-                        </span>
-                      </Button>
-                    </VStack>
-                  ) : (
-                    <VStack>
-                      <Button onClick={this.startEdit} disabled={Fider.isReadOnly}>
-                        <Icon sprite={IconPencilAlt} />
-                        <span>
-                          <Trans id="action.edit">Edit</Trans>
-                        </span>
-                      </Button>
-                      {Fider.session.user.isCollaborator && <ResponseForm post={this.props.post} />}
-                    </VStack>
-                  )}
-                </VStack>
-              )}
+              <div className="p-show-post__discussion_col">
+                <DiscussionPanel post={this.props.post} comments={this.props.comments} highlightedComment={this.state.highlightedComment} />
+              </div>
+            </div>
+            <div className="p-show-post__action-col">
+              <VStack spacing={4}>
+                <VotesPanel post={this.props.post} votes={this.props.votes} />
 
-              <TagsPanel post={this.props.post} tags={this.props.tags} />
-              <NotificationsPanel post={this.props.post} subscribed={this.props.subscribed} />
-              <ModerationPanel post={this.props.post} />
-              <PoweredByFider slot="show-post" />
-            </VStack>
+                {Fider.session.isAuthenticated && canEditPost(Fider.session.user, this.props.post) && (
+                  <VStack>
+                    <span key={0} className="text-category">
+                      <Trans id="label.actions">Actions</Trans>
+                    </span>
+                    {this.state.editMode ? (
+                      <VStack>
+                        <Button variant="primary" onClick={this.saveChanges} disabled={Fider.isReadOnly}>
+                          <Icon sprite={IconCheck} />{" "}
+                          <span>
+                            <Trans id="action.save">Save</Trans>
+                          </span>
+                        </Button>
+                        <Button onClick={this.cancelEdit} disabled={Fider.isReadOnly}>
+                          <Icon sprite={IconX} />
+                          <span>
+                            <Trans id="action.cancel">Cancel</Trans>
+                          </span>
+                        </Button>
+                      </VStack>
+                    ) : (
+                      <VStack>
+                        <Button onClick={this.startEdit} disabled={Fider.isReadOnly}>
+                          <Icon sprite={IconPencilAlt} />
+                          <span>
+                            <Trans id="action.edit">Edit</Trans>
+                          </span>
+                        </Button>
+                        {Fider.session.user.isCollaborator && <ResponseForm post={this.props.post} />}
+                      </VStack>
+                    )}
+                  </VStack>
+                )}
 
-            <div className="p-show-post__discussion_col">
-              <DiscussionPanel post={this.props.post} comments={this.props.comments} highlightedComment={this.state.highlightedComment} />
+                <TagsPanel post={this.props.post} tags={this.props.tags} />
+                <NotificationsPanel post={this.props.post} subscribed={this.props.subscribed} />
+                <ModerationPanel post={this.props.post} />
+              </VStack>
+              <PoweredByFider slot="show-post" className="mt-3" />
             </div>
-          </VStack>
+          </div>
         </div>
       </>
     )

diff --git a/public/pages/ShowPost/components/DiscussionPanel.tsx b/public/pages/ShowPost/components/DiscussionPanel.tsx
@@ -17,7 +17,7 @@ interface DiscussionPanelProps {
 export const DiscussionPanel = (props: DiscussionPanelProps) => {
   return (
     <>
-      <VStack spacing={2} className="c-comment-list">
+      <VStack spacing={2} className="c-comment-list mt-8">
         <span className="text-category">
           <Trans id="label.discussion">Discussion</Trans>
         </span>

diff --git a/public/pages/ShowPost/components/ShowComment.tsx b/public/pages/ShowPost/components/ShowComment.tsx
@@ -122,8 +122,8 @@ export const ShowComment = (props: ShowCommentProps) => {
 
   const classList = classSet({
     "flex-grow rounded-md p-2": true,
-    "bg-gray-50": !props.highlighted,
-    "bg-gray-200": props.highlighted,
+    "bg-white": !props.highlighted,
+    "bg-gray-100": props.highlighted,
   })
 
   return (