Settings tweaks

public/assets/styles/utility/page.scss

@@ -5,7 +5,7 @@
 }
 
 .page {
-  padding-top: spacing(4);
+  padding-top: spacing(5);
   padding-bottom: spacing(4);
 }
 

public/assets/styles/utility/text.scss

@@ -10,8 +10,8 @@ pre:last-child {
 }
 
 .text-display2 {
-  font-size: get("font.size.2xl");
-  font-weight: get("font.weight.bold");
+  font-size: get("font.size.xl");
+  font-weight: get("font.weight.medium");
   letter-spacing: -1px;
 }
 
@@ -21,7 +21,7 @@ pre:last-child {
 }
 
 .text-title {
-  font-size: get("font.size.lg");
+  font-size: get("font.size.xl");
   font-weight: get("font.weight.medium");
 }
 

public/components/Header.tsx

@@ -18,7 +18,7 @@ export const Header = () => {
   return (
     <div id="c-header" className="bg-white">
       <SignInModal isOpen={isSignInModalOpen} onClose={hideModal} />
-      <HStack className="c-menu shadow p-2 w-full">
+      <HStack className="c-menu shadow p-4 w-full">
         <div className="container">
           <HStack justify="between">
             <a href="/" className="flex flex-x flex-items-center flex--spacing-2 h-8">

public/components/common/form/Form.scss

@@ -1,11 +1,11 @@
 @import "~@fider/assets/styles/variables.scss";
 
 .c-form-field {
-  margin-bottom: spacing(5);
+  margin-bottom: spacing(7);
 
   > label {
     display: block;
-    font-size: get("font.size.sm");
+    font-size: get("font.size.base");
     margin-bottom: spacing(1);
     font-weight: 500;
   }

public/pages/Administration/components/AdminBasePage.scss

@@ -6,6 +6,6 @@
   gap: spacing(4);
 
   @include media("lg") {
-    grid-template-columns: 1fr 5fr;
+    grid-template-columns: 1fr 4fr 1fr;
   }
 }

public/pages/Administration/components/AdminBasePage.tsx

@@ -17,7 +17,7 @@ export const AdminPageContainer = (props: AdminPageContainerProps) => {
   return (
     <>
       <Header />
-      <div id={props.id} className="page container box my-5">
+      <div id={props.id} className="page container">
         <HStack justify="between">
           <PageTitle title={props.title} subtitle={props.subtitle} />
           <SideMenuToggler />

public/pages/Administration/components/SideMenu.scss

@@ -2,7 +2,7 @@
 
 .c-side-menu {
   &__item {
-    padding: spacing(3);
+    padding: spacing(4);
     border-bottom: 1px solid get("colors.gray.200");
     color: get("colors.gray.900");
 

public/pages/Administration/components/SideMenu.tsx

@@ -39,7 +39,7 @@ export const SideMenu = (props: SiteMenuProps) => {
 
   return (
     <div className="js-admin-menu sm:hidden md:hidden lg:block">
-      <VStack spacing={0} className="c-side-menu rounded-md shadow">
+      <VStack spacing={0} className="c-side-menu rounded-md shadow bg-white">
         <SideMenuItem name="general" title="General" href="/admin" isActive={activeItem === "general"} />
         <SideMenuItem name="privacy" title="Privacy" href="/admin/privacy" isActive={activeItem === "privacy"} />
         <SideMenuItem name="members" title="Members" href="/admin/members" isActive={activeItem === "members"} />

public/pages/Administration/pages/GeneralSettings.page.tsx

@@ -44,11 +44,8 @@ const GeneralSettingsPage = () => {
   return (
     <AdminPageContainer id="p-admin-general" name="general" title="General" subtitle="Manage your site settings">
       <Form error={error}>
-        <Input field="title" label="Title" maxLength={60} value={title} disabled={!fider.session.user.isAdministrator} onChange={setTitle}>
-          <p className="text-muted">
-            The title is used on the header, emails, notifications and SEO content. Keep it short and simple. The product/service name is usually the best
-            choice.
-          </p>
+        <Input field="title" label="Your Fider board's title" maxLength={60} value={title} disabled={!fider.session.user.isAdministrator} onChange={setTitle}>
+          <p className="text-muted">Keep it short and snappy. Your product / service name is usually best.</p>
         </Input>
 
         <TextArea
@@ -60,7 +57,7 @@ const GeneralSettingsPage = () => {
         >
           <p className="text-muted">
             The message is shown on this site&apos;s home page. Use it to help visitors understand what this space is about and the importance of their
-            feedback. Leave it empty for a default message.
+            feedback.
           </p>
         </TextArea>
 
@@ -73,16 +70,11 @@ const GeneralSettingsPage = () => {
           placeholder="Enter your suggestion here..."
           onChange={setInvitation}
         >
-          <p className="text-muted">
-            This text is used as a placeholder for the suggestion&apos;s text box. Use it to invite your visitors into sharing their suggestions and feedback.
-            Leave it empty for a default message.
-          </p>
+          <p className="text-muted">Placeholder text in the suggestion&apos;s box. It should invite your visitors into sharing their feedback.</p>
         </Input>
 
-        <ImageUploader label="Logo" field="logo" bkey={fider.session.tenant.logoBlobKey} disabled={!fider.session.user.isAdministrator} onChange={setLogo}>
-          <p className="text-muted">
-            We accept JPG, GIF and PNG images, smaller than 100KB and with an aspect ratio of 1:1 with minimum dimensions of 200x200 pixels.
-          </p>
+        <ImageUploader label="Your Logo" field="logo" bkey={fider.session.tenant.logoBlobKey} disabled={!fider.session.user.isAdministrator} onChange={setLogo}>
+          <p className="text-muted">JPG, GIF or PNG smaller than 100KB, minimum size 200x200 pixels.</p>
         </ImageUploader>
 
         {!Fider.isSingleHostMode() && (
@@ -104,8 +96,7 @@ const GeneralSettingsPage = () => {
                 ]
               ) : (
                 <p>
-                  Custom domains allow you to access your app via your own domain name (for example, <code>feedback.yourcompany.com</code>
-                  ).
+                  Use custom domains to access Fider via your own domain name <code>feedback.yourcompany.com</code>
                 </p>
               )}
             </div>