Minor UI fix on mobile

BDX-town · Aug 21, 2022 · b270e3e · b270e3e
1 parent 0aa01d7
commit b270e3e
Show file tree

Hide file tree

Showing 10 changed files with 58 additions and 58 deletions.
diff --git a/app/soapbox/features/chats/index.tsx b/app/soapbox/features/chats/index.tsx
@@ -30,21 +30,20 @@ const ChatIndex: React.FC = () => {
   };
 
   return (
-    <Column label={intl.formatMessage(messages.title)}>
-      <div className='column__switch'>
-        <AudioToggle />
+    <Column withHeader={false} label={intl.formatMessage(messages.title)}>
+      <div className='my-3'>
+        <AccountSearch
+          placeholder={intl.formatMessage(messages.searchPlaceholder)}
+          onSelected={handleSuggestion}
+        />
       </div>
 
-      <AccountSearch
-        placeholder={intl.formatMessage(messages.searchPlaceholder)}
-        onSelected={handleSuggestion}
-      />
-
       <ChatList
         onClickChat={handleClickChat}
         useWindowScroll
       />
     </Column>
+
   );
 };
 

diff --git a/app/soapbox/features/compose/components/compose_form.js b/app/soapbox/features/compose/components/compose_form.js
@@ -384,7 +384,7 @@ class ComposeForm extends ImmutablePureComponent {
             {features.richText && <MarkdownButtonContainer />}
           </div>
 
-          <div className='flex items-center space-x-4 ml-auto'>
+          <div className='flex items-center mt-2 space-x-4 ml-auto'>
             {maxTootChars && (
               <div className='flex items-center space-x-1'>
                 <TextCharacterCounter max={maxTootChars} text={text} />

diff --git a/app/soapbox/features/enlistment/steps/step1.tsx b/app/soapbox/features/enlistment/steps/step1.tsx
@@ -19,8 +19,8 @@ const Step1: React.FC = () => {
             <h3 className="text-2xl font-bold">
                 <FormattedMessage id="enlistment.step1.title" />
             </h3>
-            <div className="flex mt-2">
-                <div className="pr-6 w-1/2">
+            <div className="flex gap-12 mt-2">
+                <div className="flex-grow-1">
                     <p>
                         <FormattedMessage
                             id="enlistment.step1.left"
@@ -39,7 +39,7 @@ const Step1: React.FC = () => {
                         />
                     </p>
                 </div>
-                <div className="pl-6 w-1/2">
+                <div className="flex-grow-1">
                     <p dangerouslySetInnerHTML={{ __html: intl.formatMessage(messages.right)}} />
                 </div>
             </div>

diff --git a/app/soapbox/features/enlistment/steps/step2.tsx b/app/soapbox/features/enlistment/steps/step2.tsx
@@ -15,8 +15,8 @@ const Step2: React.FC = () => {
 
     return (
         <div className="enlistment__step2 mx-auto py-10 px-5">
-            <div className="flex mt-3">
-                <div className="w-1/3">
+            <div className="flex mt-3 gap-3">
+                <div className="flex-grow-1">
                     <h3 className="text-xl font-bold">
                         <FormattedMessage id="enlistment.step2.title1" />
                     </h3>
@@ -25,7 +25,7 @@ const Step2: React.FC = () => {
                         <FormattedMessage id="enlistment.step2.explanation1" />
                     </p>
                 </div>
-                <div className="mx-6 w-1/3">
+                <div className="flex-grow-1">
                     <h3 className="text-xl font-bold">
                         {instance.get("title")}
                     </h3>
@@ -34,7 +34,7 @@ const Step2: React.FC = () => {
                         <FormattedMessage id="enlistment.step2.explanation2" />
                     </p>
                 </div>
-                <div className="w-1/3">
+                <div className="flex-grow-1">
                     <h3 className="text-xl font-bold">
                         <FormattedMessage id="enlistment.step2.title3" />
                     </h3>

diff --git a/app/soapbox/features/enlistment/steps/step3.tsx b/app/soapbox/features/enlistment/steps/step3.tsx
@@ -15,40 +15,48 @@ const Step3: React.FC = () => {
                 </p>
             </div>
             <div className="mt-10">
-                <div className='flex'>
-                    <div className='w-1/2 pr-2'>
-                        <h4 className="flex items-center text-xl font-bold">
-                            <Icon className="mr-1 w-6 h-6" src={require("@tabler/icons/world.svg")} />
-                            <FormattedMessage id="enlistment.step3.public-title" />
+                <div className='flex gap-4'>
+                    <div className='flex-grow-1 w-1/2'>
+                        <h4 className="items-center text-xl font-bold">
+                            <Icon className="inline-block align-middle mr-1 w-6 h-6" src={require("@tabler/icons/world.svg")} />
+                            <span className='align-middle'>
+                                <FormattedMessage id="enlistment.step3.public-title" />
+                            </span>
                         </h4>
                         <p>
                             <FormattedMessage id="enlistment.step3.public-description" />
                         </p>
                     </div>
-                    <div className="w-1/2 pr-2">
-                        <h4 className='flex items-center text-xl font-bold'>
-                            <Icon className='mr-1 w-6 h-6' src={require("@tabler/icons/lock-open.svg")} />
-                            <FormattedMessage id="enlistment.step3.unlisted-title" />
+                    <div className="flex-grow-1 w-1/2">
+                        <h4 className='items-center text-xl font-bold'>
+                            <Icon className='inline-block align-middle mr-1 w-6 h-6' src={require("@tabler/icons/lock-open.svg")} />
+                            <span className='align-middle'>
+                                <FormattedMessage id="enlistment.step3.unlisted-title" />
+                            </span>
                         </h4>
                         <p>
                             <FormattedMessage id="enlistment.step3.unlisted-description" />
                         </p>
                     </div>
                 </div>
-                <div className='mt-10 flex'>
-                    <div className='w-1/2 pr-2'>
-                        <h4 className='flex items-center text-xl font-bold'>
-                            <Icon className='mr-1 w-6 h-6' src={require("@tabler/icons/lock.svg")} />
-                            <FormattedMessage id="enlistment.step3.followers-title" />
+                <div className='mt-10 flex gap-4'>
+                    <div className='flex-grow-1 w-1/2'>
+                        <h4 className='items-center text-xl font-bold'>
+                            <Icon className='inline-block align-middle mr-1 w-6 h-6' src={require("@tabler/icons/lock.svg")} />
+                            <span className='align-middle'>
+                                <FormattedMessage id="enlistment.step3.followers-title" />
+                            </span>
                         </h4>
                         <p>
                             <FormattedMessage id="enlistment.step3.followers-description" />
                         </p>
                     </div>
-                    <div className='w-1/2 pl-2'>
-                        <h4 className='flex items-center text-xl font-bold'>
-                            <Icon className='mr-1 w-6 h-6' src={require("@tabler/icons/mail.svg")} />
-                            <FormattedMessage id="enlistment.step3.direct-title" />
+                    <div className='flex-grow-1 w-1/2'>
+                        <h4 className='items-center text-xl font-bold'>
+                            <Icon className='inline-block align-middle mr-1 w-6 h-6' src={require("@tabler/icons/mail.svg")} />
+                            <span className='align-middle'>
+                                <FormattedMessage id="enlistment.step3.direct-title" />
+                            </span>
                         </h4>
                         <p>
                             <FormattedMessage id="enlistment.step3.direct-description" />

diff --git a/app/soapbox/features/search/index.tsx b/app/soapbox/features/search/index.tsx
@@ -13,7 +13,7 @@ const SearchPage = () => {
   const intl = useIntl();
 
   return (
-    <Column label={intl.formatMessage(messages.heading)}>
+    <Column withHeader={false} label={intl.formatMessage(messages.heading)}>
       <div className='space-y-4'>
         <Search autoFocus autoSubmit />
         <SearchResults />

diff --git a/app/soapbox/features/ui/components/profile-dropdown.tsx b/app/soapbox/features/ui/components/profile-dropdown.tsx
@@ -111,7 +111,7 @@ const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {
           if (menuItem.toggle) {
             return (
               <div key={idx} className='flex flex-row items-center justify-between px-4 py-1 text-sm text-gray-700 dark:text-gray-400'>
-                <span>{menuItem.text}</span>
+                <span className='mr-2'>{menuItem.text}</span>
 
                 {menuItem.toggle}
               </div>

diff --git a/app/soapbox/locales/fr.json b/app/soapbox/locales/fr.json
@@ -185,7 +185,7 @@
   "chats.audio_toggle_off": "Audio notification off",
   "chats.audio_toggle_on": "Audio notification on",
   "chats.dividers.today": "Today",
-  "chats.search_placeholder": "Start a chat with…",
+  "chats.search_placeholder": "Discuter avec ...",
   "column.admin.awaiting_approval": "Awaiting Approval",
   "column.admin.dashboard": "Dashboard",
   "column.admin.moderation_log": "Moderation Log",
@@ -258,7 +258,7 @@
   "column.reblogs": "Reposts",
   "column.remote": "Federated timeline",
   "column.scheduled_statuses": "Scheduled Posts",
-  "column.search": "Search",
+  "column.search": "Recherche",
   "column.settings_store": "Settings store",
   "column.soapbox_config": "Soapbox config",
   "column.test": "Test timeline",
@@ -692,7 +692,7 @@
   "navigation.direct_messages": "Messages",
   "navigation.home": "Accueil",
   "navigation.notifications": "Notifications",
-  "navigation.search": "Search",
+  "navigation.search": "Recherche",
   "navigation_bar.account_aliases": "Alias de compte",
   "navigation_bar.account_migration": "Move account",
   "navigation_bar.blocks": "Comptes bloqués",

diff --git a/app/soapbox/pages/home_page.tsx b/app/soapbox/pages/home_page.tsx
@@ -39,24 +39,6 @@ const HomePage: React.FC = ({ children }) => {
   return (
     <>
       <Layout.Main className='pt-3 sm:pt-0 dark:divide-slate-700 space-y-3'>
-        {me && (
-          <Card variant='rounded' ref={composeBlock}>
-            <CardBody>
-              <div className='flex items-start space-x-4'>
-                <Link to={`/@${acct}`}>
-                  <Avatar account={account} size={46} />
-                </Link>
-
-                <ComposeFormContainer
-                  // @ts-ignore
-                  shouldCondense
-                  autoFocus={false}
-                  clickableAreaRef={composeBlock}
-                />
-              </div>
-            </CardBody>
-          </Card>
-        )}
 
         <FeedCarousel />
 

diff --git a/app/styles/components/enlistment.scss b/app/styles/components/enlistment.scss
@@ -28,6 +28,7 @@
 
         .enlistment__step0, .enlistment__step1, .enlistment__step2, .enlistment__step3, .enlistment__step4 {
             max-width: 700px;
+
             .enlisted__step0__username {
                 background-color: rgb(var(--color-primary-600) / var(--tw-bg-opacity));
             }
@@ -62,9 +63,19 @@
 
     @media screen and (max-width: 600px) {
         top: $header-height;
+        height: calc(100% - $header-height);
         & > section {
-            height: calc(100vh - $header-height);
+            height: 100%;
             border-radius: 0;
+
+            .enlistment__step0, .enlistment__step1, .enlistment__step2, .enlistment__step3, .enlistment__step4 {
+                .flex {
+                    flex-wrap: wrap;
+                    & > div {
+                        min-width: 100%;
+                    }
+                }
+            }
         }
     }
 }