Updated Twitter and FB card edit mode design

refs https://github.com/TryGhost/Team/issues/3318

ghost/admin-x-settings/src/components/settings/general/Facebook.tsx

@@ -2,8 +2,10 @@ import ImageUpload from '../../../admin-x-ds/global/ImageUpload';
 import React, {useContext} from 'react';
 import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
 import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
+import TextArea from '../../../admin-x-ds/global/TextArea';
 import TextField from '../../../admin-x-ds/global/TextField';
 import useSettingGroup from '../../../hooks/useSettingGroup';
+import {ReactComponent as FacebookLogo} from '../../../admin-x-ds/assets/images/facebook-logo.svg';
 import {FileService, ServicesContext} from '../../providers/ServiceProvider';
 
 const Facebook: React.FC = () => {
@@ -28,7 +30,7 @@ const Facebook: React.FC = () => {
         updateSetting('og_title', e.target.value);
     };
 
-    const handleDescriptionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleDescriptionChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
         updateSetting('og_description', e.target.value);
     };
 
@@ -46,30 +48,50 @@ const Facebook: React.FC = () => {
     );
 
     const inputFields = (
-        <SettingGroupContent>
+        <div>
-            <ImageUpload
+            <div className="mb-4 flex items-center gap-2">
-                height='200px'
+                <div>
-                id='twitter-image'
+                    <FacebookLogo className='h-10 w-10' />
-                imageURL={facebookImage}
+                </div>
-                onDelete={handleImageDelete}
+                <div>
-                onUpload={handleImageUpload}
+                    <div className="mb-1 font-semibold leading-none text-grey-900">{siteTitle}</div>
-            >
+                    <div className="leading-none text-grey-700">2h</div>
-                Upload Facebook image
+                </div>
-            </ImageUpload>
+            </div>
-            <TextField
+            <div>
-                inputRef={focusRef}
+                <div className="mb-2 h-3 w-full rounded bg-grey-200"></div>
-                placeholder={siteTitle}
+                <div className="mb-4 h-3 w-3/5 rounded bg-grey-200"></div>
-                title="Facebook title"
+                <SettingGroupContent className="overflow-hidden rounded-md border border-grey-300">
-                value={facebookTitle}
+                    <ImageUpload
-                onChange={handleTitleChange}
+                        className="rounded-b-none border-b-0"
-            />
+                        height='300px'
-            <TextField
+                        id='twitter-image'
-                placeholder={siteDescription}
+                        imageURL={facebookImage}
-                title="Facebook description"
+                        label='Upload Facebook image'
-                value={facebookDescription}
+                        onDelete={handleImageDelete}
-                onChange={handleDescriptionChange}
+                        onUpload={handleImageUpload}
-            />
+                    />
-        </SettingGroupContent>
+                    <div className="flex flex-col gap-x-6 gap-y-7 px-4 pb-7">
+                        <TextField
+                            clearBg={true}
+                            inputRef={focusRef}
+                            placeholder={siteTitle}
+                            title="Facebook title"
+                            value={facebookTitle}
+                            onChange={handleTitleChange}
+                        />
+                        <TextArea
+                            clearBg={true}
+                            placeholder={siteDescription}
+                            rows={2}
+                            title="Facebook description"
+                            value={facebookDescription}
+                            onChange={handleDescriptionChange}
+                        />
+                    </div>
+                </SettingGroupContent>
+            </div>
+        </div>
     );
 
     return (

ghost/admin-x-settings/src/components/settings/general/Twitter.tsx

@@ -2,9 +2,11 @@ import ImageUpload from '../../../admin-x-ds/global/ImageUpload';
 import React, {useContext} from 'react';
 import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
 import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
+import TextArea from '../../../admin-x-ds/global/TextArea';
 import TextField from '../../../admin-x-ds/global/TextField';
 import useSettingGroup from '../../../hooks/useSettingGroup';
 import {FileService, ServicesContext} from '../../providers/ServiceProvider';
+import {ReactComponent as TwitterLogo} from '../../../admin-x-ds/assets/images/twitter-logo.svg';
 
 const Twitter: React.FC = () => {
     const {
@@ -28,7 +30,7 @@ const Twitter: React.FC = () => {
         updateSetting('twitter_title', e.target.value);
     };
 
-    const handleDescriptionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleDescriptionChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
         updateSetting('twitter_description', e.target.value);
     };
 
@@ -50,30 +52,48 @@ const Twitter: React.FC = () => {
     );
 
     const inputFields = (
-        <SettingGroupContent>
+        <div className="flex gap-3">
-            <ImageUpload
+            <div className="pt-1">
-                height='200px'
+                <TwitterLogo className='-mb-1 h-10 w-10' />
-                id='twitter-image'
+            </div>
-                imageURL={twitterImage}
+            <div className="w-full">
-                onDelete={handleImageDelete}
+                <div className="mb-2">
-                onUpload={handleImageUpload}
+                    <span className="mr-1 font-semibold text-grey-900">{siteTitle}</span>
-            >
+                    <span className="text-grey-700">&#183; 2h</span>
-                Upload twitter image
+                </div>
-            </ImageUpload>
+                <div className="mb-2 h-3 w-full rounded bg-grey-200"></div>
-            <TextField
+                <div className="mb-4 h-3 w-3/5 rounded bg-grey-200"></div>
-                inputRef={focusRef}
+                <SettingGroupContent className="overflow-hidden rounded-md border border-grey-300">
-                placeholder={siteTitle}
+                    <ImageUpload
-                title="Twitter title"
+                        className="rounded-b-none border-b-0"
-                value={twitterTitle}
+                        height='300px'
-                onChange={handleTitleChange}
+                        id='twitter-image'
-            />
+                        imageURL={twitterImage}
-            <TextField
+                        label='Upload Twitter image'
-                placeholder={siteDescription}
+                        onDelete={handleImageDelete}
-                title="Twitter description"
+                        onUpload={handleImageUpload}
-                value={twitterDescription}
+                    />
-                onChange={handleDescriptionChange}
+                    <div className="flex flex-col gap-x-6 gap-y-7 px-4 pb-7">
-            />
+                        <TextField
-        </SettingGroupContent>
+                            clearBg={true}
+                            inputRef={focusRef}
+                            placeholder={siteTitle}
+                            title="Twitter title"
+                            value={twitterTitle}
+                            onChange={handleTitleChange}
+                        />
+                        <TextArea
+                            clearBg={true}
+                            placeholder={siteDescription}
+                            rows={2}
+                            title="Twitter description"
+                            value={twitterDescription}
+                            onChange={handleDescriptionChange}
+                        />
+                    </div>
+                </SettingGroupContent>
+            </div>
+        </div>
     );
 
     return (
@@ -88,7 +108,9 @@ const Twitter: React.FC = () => {
             onStateChange={handleStateChange}
         >
             {values}
-            {currentState !== 'view' ? inputFields : ''}
+            <div>
+                {currentState !== 'view' ? inputFields : ''}
+            </div>
         </SettingGroup>
     );
 };