From b57cecea8d255c262225d262ae2d658bed9ca05c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Fri, 15 Jul 2022 23:53:28 +0200
Subject: [PATCH] Minor visual improvements
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../components/autosuggest_textarea.tsx       |   2 +-
 .../features/account_gallery/index.tsx        |  11 +++++++----
 .../auth_login/components/login_form.tsx      |   2 +-
 .../auth_login/components/otp_auth_form.tsx   |   2 +-
 .../components/password_reset_confirm.tsx     |   2 +-
 .../compose/components/compose_form.js        | Bin 14437 -> 14453 bytes
 .../feed-suggestions/feed-suggestions.tsx     |   3 +++
 .../features/onboarding/steps/bio-step.tsx    |   2 +-
 .../steps/cover-photo-selection-step.tsx      |   2 +-
 .../onboarding/steps/display-name-step.tsx    |   2 +-
 .../steps/suggested-accounts-step.tsx         |   2 +-
 .../components/status-interaction-bar.tsx     |   2 +-
 .../features/verification/registration.tsx    |   2 +-
 .../verification/steps/age-verification.tsx   |   2 +-
 .../verification/steps/email-verification.tsx |   2 +-
 .../verification/steps/sms-verification.tsx   |   4 ++--
 app/styles/accounts.scss                      |   7 -------
 17 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/app/soapbox/components/autosuggest_textarea.tsx b/app/soapbox/components/autosuggest_textarea.tsx
index 69d29261f4..84eff00c56 100644
--- a/app/soapbox/components/autosuggest_textarea.tsx
+++ b/app/soapbox/components/autosuggest_textarea.tsx
@@ -260,7 +260,7 @@ class AutosuggestTextarea extends ImmutablePureComponent<IAutosuggesteTextarea>
 
             <Textarea
               ref={this.setTextarea}
-              className={classNames('transition-[min-height] motion-reduce:transition-none dark:bg-slate-800 px-0 mt-1 border-0 text-gray-800 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 resize-none w-full focus:shadow-none focus:border-0 focus:ring-0', {
+              className={classNames('transition-[min-height] motion-reduce:transition-none dark:bg-slate-800 px-0 border-0 text-gray-800 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 resize-none w-full focus:shadow-none focus:border-0 focus:ring-0', {
                 'min-h-[40px]': condensed,
                 'min-h-[100px]': !condensed,
               })}
diff --git a/app/soapbox/features/account_gallery/index.tsx b/app/soapbox/features/account_gallery/index.tsx
index fd07d7c2b0..ddd2b31606 100644
--- a/app/soapbox/features/account_gallery/index.tsx
+++ b/app/soapbox/features/account_gallery/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useParams } from 'react-router-dom';
 
@@ -66,8 +66,11 @@ const AccountGallery = () => {
   const isLoading = useAppSelector((state) => state.timelines.get(`account:${accountId}:media`)?.isLoading);
   const hasMore = useAppSelector((state) => state.timelines.get(`account:${accountId}:media`)?.hasMore);
 
-  const ref = useRef<HTMLDivElement>(null);
-  const [width] = useState(323);
+  const [width, setWidth] = useState(323);
+
+  const handleRef = (c: HTMLDivElement) => {
+    if (c) setWidth(c.offsetWidth);
+  };
 
   const handleScrollToBottom = () => {
     if (hasMore) {
@@ -138,7 +141,7 @@ const AccountGallery = () => {
 
   return (
     <Column label={`@${accountUsername}`} transparent withHeader={false}>
-      <div role='feed' className='account-gallery__container' ref={ref}>
+      <div role='feed' className='account-gallery__container' ref={handleRef}>
         {attachments.map((attachment, index) => attachment === null ? (
           <LoadMoreMedia key={'more:' + attachments.get(index + 1)?.id} maxId={index > 0 ? (attachments.get(index - 1)?.id || null) : null} onLoadMore={handleLoadMore} />
         ) : (
diff --git a/app/soapbox/features/auth_login/components/login_form.tsx b/app/soapbox/features/auth_login/components/login_form.tsx
index 64145453c7..c0fbbb4056 100644
--- a/app/soapbox/features/auth_login/components/login_form.tsx
+++ b/app/soapbox/features/auth_login/components/login_form.tsx
@@ -25,7 +25,7 @@ const LoginForm: React.FC<ILoginForm> = ({ isLoading, handleSubmit }) => {
 
   return (
     <div>
-      <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 border-solid -mx-4 sm:-mx-10'>
+      <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-600 border-solid -mx-4 sm:-mx-10'>
         <h1 className='text-center font-bold text-2xl'><FormattedMessage id='login_form.header' defaultMessage='Sign In' /></h1>
       </div>
 
diff --git a/app/soapbox/features/auth_login/components/otp_auth_form.tsx b/app/soapbox/features/auth_login/components/otp_auth_form.tsx
index b4ef3d9d5e..9a51051120 100644
--- a/app/soapbox/features/auth_login/components/otp_auth_form.tsx
+++ b/app/soapbox/features/auth_login/components/otp_auth_form.tsx
@@ -48,7 +48,7 @@ const OtpAuthForm: React.FC<IOtpAuthForm> = ({ mfa_token }) => {
 
   return (
     <div>
-      <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 border-solid -mx-4 sm:-mx-10'>
+      <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-600 border-solid -mx-4 sm:-mx-10'>
         <h1 className='text-center font-bold text-2xl'>
           <FormattedMessage id='login.otp_log_in' defaultMessage='OTP Login' />
         </h1>
diff --git a/app/soapbox/features/auth_login/components/password_reset_confirm.tsx b/app/soapbox/features/auth_login/components/password_reset_confirm.tsx
index b18fbc8e30..2a55c54836 100644
--- a/app/soapbox/features/auth_login/components/password_reset_confirm.tsx
+++ b/app/soapbox/features/auth_login/components/password_reset_confirm.tsx
@@ -58,7 +58,7 @@ const PasswordResetConfirm = () => {
 
   return (
     <div>
-      <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 border-solid -mx-4 sm:-mx-10'>
+      <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-600 border-solid -mx-4 sm:-mx-10'>
         <h1 className='text-center font-bold text-2xl'>
           <FormattedMessage id='reset_password.header' defaultMessage='Set New Password' />
         </h1>
diff --git a/app/soapbox/features/compose/components/compose_form.js b/app/soapbox/features/compose/components/compose_form.js
index 66010cfd3adffcb5ebb22f9c79b258f35d9493ac..961f79480bf001ca3692fda60801dccd3db4aa61 100644
GIT binary patch
delta 93
zcmaD_@U>t=Dif!ULU2i9a<)S4<c*9{n;V%p)RZ6s$vKI|#eRvoskZ9nx@o03IqC|<
n1&PV2w$+BUo9Am(vu&2wH|7)tE4JfO00K>GAXUr7Rm%kc3cwwa

delta 67
zcmexb@U&n<Dif1J?c|M&Qky%NIMgOTH{xe6*G((U$x+|DNu!#LH8)AuNMW<CzA>k8
UN@kfImjV!IS_7$CF0NWG03wPM3jhEB

diff --git a/app/soapbox/features/feed-suggestions/feed-suggestions.tsx b/app/soapbox/features/feed-suggestions/feed-suggestions.tsx
index 683e771b62..b888e80e3e 100644
--- a/app/soapbox/features/feed-suggestions/feed-suggestions.tsx
+++ b/app/soapbox/features/feed-suggestions/feed-suggestions.tsx
@@ -60,6 +60,9 @@ const SuggestionItem = ({ accountId }: { accountId: string }) => {
 const FeedSuggestions = () => {
   const intl = useIntl();
   const suggestedProfiles = useAppSelector((state) => state.suggestions.items);
+  const isLoading = useAppSelector((state) => state.suggestions.isLoading);
+
+  if (!isLoading && suggestedProfiles.size === 0) return null;
 
   return (
     <Card size='lg' variant='rounded'>
diff --git a/app/soapbox/features/onboarding/steps/bio-step.tsx b/app/soapbox/features/onboarding/steps/bio-step.tsx
index 785accc379..1694b74614 100644
--- a/app/soapbox/features/onboarding/steps/bio-step.tsx
+++ b/app/soapbox/features/onboarding/steps/bio-step.tsx
@@ -45,7 +45,7 @@ const BioStep = ({ onNext }: { onNext: () => void }) => {
     <Card variant='rounded' size='xl'>
       <CardBody>
         <div>
-          <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 border-solid -mx-4 sm:-mx-10'>
+          <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-600 border-solid -mx-4 sm:-mx-10'>
             <Stack space={2}>
               <Text size='2xl' align='center' weight='bold'>
                 <FormattedMessage id='onboarding.note.title' defaultMessage='Write a short bio' />
diff --git a/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx b/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
index 5bc7d898f3..0aaa471a3d 100644
--- a/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
+++ b/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
@@ -75,7 +75,7 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
     <Card variant='rounded' size='xl'>
       <CardBody>
         <div>
-          <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 border-solid -mx-4 sm:-mx-10'>
+          <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-600 border-solid -mx-4 sm:-mx-10'>
             <Stack space={2}>
               <Text size='2xl' align='center' weight='bold'>
                 <FormattedMessage id='onboarding.header.title' defaultMessage='Pick a cover image' />
diff --git a/app/soapbox/features/onboarding/steps/display-name-step.tsx b/app/soapbox/features/onboarding/steps/display-name-step.tsx
index 56d9eac1e2..e85be85eb7 100644
--- a/app/soapbox/features/onboarding/steps/display-name-step.tsx
+++ b/app/soapbox/features/onboarding/steps/display-name-step.tsx
@@ -52,7 +52,7 @@ const DisplayNameStep = ({ onNext }: { onNext: () => void }) => {
     <Card variant='rounded' size='xl'>
       <CardBody>
         <div>
-          <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 border-solid -mx-4 sm:-mx-10'>
+          <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-600 border-solid -mx-4 sm:-mx-10'>
             <Stack space={2}>
               <Text size='2xl' align='center' weight='bold'>
                 <FormattedMessage id='onboarding.display_name.title' defaultMessage='Choose a display name' />
diff --git a/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx b/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx
index d7340b163a..97fe6cfc7a 100644
--- a/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx
+++ b/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx
@@ -76,7 +76,7 @@ const SuggestedAccountsStep = ({ onNext }: { onNext: () => void }) => {
     <Card variant='rounded' size='xl'>
       <CardBody>
         <div>
-          <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 border-solid -mx-4 sm:-mx-10'>
+          <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-600 border-solid -mx-4 sm:-mx-10'>
             <Stack space={2}>
               <Text size='2xl' align='center' weight='bold'>
                 <FormattedMessage id='onboarding.suggestions.title' defaultMessage='Suggested accounts' />
diff --git a/app/soapbox/features/status/components/status-interaction-bar.tsx b/app/soapbox/features/status/components/status-interaction-bar.tsx
index 72cb061db0..57511767cd 100644
--- a/app/soapbox/features/status/components/status-interaction-bar.tsx
+++ b/app/soapbox/features/status/components/status-interaction-bar.tsx
@@ -139,7 +139,7 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
               return (
                 <HStack space={0.5} className='emoji-react p-1' alignItems='center' key={i}>
                   <Emoji
-                    className='emoji-react__emoji w-5 h-5 flex-none'
+                    className='emoji-react__emoji w-5 h-5 flex-none cursor-pointer'
                     emoji={e.get('name')}
                     onClick={features.exposableReactions ? handleOpenReactionsModal(e) : undefined}
                   />
diff --git a/app/soapbox/features/verification/registration.tsx b/app/soapbox/features/verification/registration.tsx
index a06d49963b..bd510ebb12 100644
--- a/app/soapbox/features/verification/registration.tsx
+++ b/app/soapbox/features/verification/registration.tsx
@@ -94,7 +94,7 @@ const Registration = () => {
 
   return (
     <div>
-      <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 border-solid -mx-4 sm:-mx-10'>
+      <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-600 border-solid -mx-4 sm:-mx-10'>
         <h1 className='text-center font-bold text-2xl'>
           <FormattedMessage id='registration.header' defaultMessage='Register your account' />
         </h1>
diff --git a/app/soapbox/features/verification/steps/age-verification.tsx b/app/soapbox/features/verification/steps/age-verification.tsx
index 634fd92c44..d1e83b406d 100644
--- a/app/soapbox/features/verification/steps/age-verification.tsx
+++ b/app/soapbox/features/verification/steps/age-verification.tsx
@@ -50,7 +50,7 @@ const AgeVerification = () => {
 
   return (
     <div>
-      <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 border-solid -mx-4 sm:-mx-10'>
+      <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-600 border-solid -mx-4 sm:-mx-10'>
         <h1 className='text-center font-bold text-2xl'>
           <FormattedMessage id='age_verification.header' defaultMessage='Enter your birth date' />
         </h1>
diff --git a/app/soapbox/features/verification/steps/email-verification.tsx b/app/soapbox/features/verification/steps/email-verification.tsx
index 9ee87cbeea..800e3dd3d9 100644
--- a/app/soapbox/features/verification/steps/email-verification.tsx
+++ b/app/soapbox/features/verification/steps/email-verification.tsx
@@ -108,7 +108,7 @@ const EmailVerification = () => {
 
   return (
     <div>
-      <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 border-solid -mx-4 sm:-mx-10'>
+      <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-600 border-solid -mx-4 sm:-mx-10'>
         <h1 className='text-center font-bold text-2xl'>{intl.formatMessage({ id: 'email_verification.header', defaultMessage: 'Enter your email address' })}</h1>
       </div>
 
diff --git a/app/soapbox/features/verification/steps/sms-verification.tsx b/app/soapbox/features/verification/steps/sms-verification.tsx
index 0388964c31..6462203e24 100644
--- a/app/soapbox/features/verification/steps/sms-verification.tsx
+++ b/app/soapbox/features/verification/steps/sms-verification.tsx
@@ -95,7 +95,7 @@ const SmsVerification = () => {
   if (status === Statuses.REQUESTED) {
     return (
       <div>
-        <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 border-solid -mx-4 sm:-mx-10'>
+        <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-600 border-solid -mx-4 sm:-mx-10'>
           <h1 className='text-center font-bold text-2xl'>
             {intl.formatMessage({ id: 'sms_verification.sent.header', defaultMessage: 'Verification code' })}
           </h1>
@@ -135,7 +135,7 @@ const SmsVerification = () => {
 
   return (
     <div>
-      <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 border-solid -mx-4 sm:-mx-10'>
+      <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-600 border-solid -mx-4 sm:-mx-10'>
         <h1 className='text-center font-bold text-2xl'>{intl.formatMessage({ id: 'sms_verification.header', defaultMessage: 'Enter your phone number' })}</h1>
       </div>
 
diff --git a/app/styles/accounts.scss b/app/styles/accounts.scss
index 365cbf80c5..0e1c47c3a3 100644
--- a/app/styles/accounts.scss
+++ b/app/styles/accounts.scss
@@ -67,13 +67,6 @@
 .account__avatar-wrapper {
   float: left;
   margin-right: 12px;
-
-  .emoji-react__emoji {
-    position: absolute;
-    top: 36px;
-    left: 32px;
-    z-index: 1;
-  }
 }
 
 .account__avatar {