fix(client): share buttons in lower jaw (#57731)

client/i18n/locales/english/translations.json

@@ -107,6 +107,7 @@
     "confirm-amount": "Confirm amount",
     "play-scene": "Press Play",
     "closed-caption": "Closed caption",
+    "share-on-x": "Share on X",
     "share-on-bluesky": "Share on BlueSky",
     "share-on-threads": "Share on Threads"
   },

client/src/components/share/share-template.test.tsx

@@ -14,7 +14,7 @@ describe('Share Template Testing', () => {
   );
   test('Testing share template Click Redirect Event', () => {
     const twitterLink = screen.queryByRole('link', {
-      name: 'buttons.tweet aria.opens-new-window'
+      name: 'buttons.share-on-x aria.opens-new-window'
     });
 
     expect(twitterLink).toBeInTheDocument();

client/src/components/share/share-template.tsx

@@ -15,7 +15,7 @@ export const ShareTemplate: React.ComponentType<ShareRedirectProps> = ({
 }) => {
   const { t } = useTranslation();
   return (
-    <div>
+    <>
       <a
         data-testid='ShareTemplateWrapperTestID'
         className='btn fade-in'
@@ -29,7 +29,7 @@ export const ShareTemplate: React.ComponentType<ShareRedirectProps> = ({
           aria-label='twitterIcon'
           aria-hidden='true'
         />
-        {t('buttons.tweet')}
+        {t('buttons.share-on-x')}
         <span className='sr-only'>{t('aria.opens-new-window')}</span>
       </a>
       <a
@@ -64,6 +64,6 @@ export const ShareTemplate: React.ComponentType<ShareRedirectProps> = ({
         {t('buttons.share-on-threads')}
         <span className='sr-only'>{t('aria.opens-new-window')}</span>
       </a>
-    </div>
+    </>
   );
 };

client/src/templates/Challenges/classic/editor.css

@@ -229,18 +229,41 @@ textarea.inputarea {
 }
 
 .utility-bar {
-  display: grid;
-  /* 8rem is a safe default for all currently supported languages. Will need to be increased if a new language has longer words for Reset/Help. */
-  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+}
+
+.utility-bar .utility-bar-top {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.utility-bar .utility-bar-top a {
+  width: 30%;
+}
+
+.utility-bar .utility-bar-top svg {
+  display: block;
+  margin: 0 auto;
+}
+
+.utility-bar .utility-bar-bottom {
+  width: 100%;
+  display: flex;
   gap: 0.75rem;
 }
 
-.utility-bar > * {
+.utility-bar .utility-bar-bottom button {
   display: flex;
-  align-items: center;
+  width: 50%;
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
   justify-content: center;
+  align-items: center;
   gap: 0.3rem;
-  padding: 6px 0;
 }
 
 .progress-bar-container {

client/src/templates/Challenges/classic/lower-jaw.tsx

@@ -96,26 +96,33 @@ const LowerButtonsPanel = ({
     <>
       <hr />
       <div className='utility-bar'>
-        <Button
-          data-playwright-test-label='lowerJaw-reset-button'
-          className='fade-in'
-          onClick={resetButtonEvent}
-        >
-          <Reset />
-          {resetButtonText}
-        </Button>
-        {showShareButton && <Share superBlock={superBlock} block={block} />}
-
-        {hideHelpButton && (
-          <Button
-            className='fade-in'
-            id='get-help-button'
-            onClick={helpButtonEvent}
-          >
-            <Help />
-            {helpButtonText}
-          </Button>
+        {showShareButton && (
+          <div className='utility-bar-top'>
+            <Share superBlock={superBlock} block={block} />
+          </div>
         )}
+
+        <div className='utility-bar-bottom'>
+          <Button
+            data-playwright-test-label='lowerJaw-reset-button'
+            className='fade-in'
+            onClick={resetButtonEvent}
+          >
+            <Reset />
+            {resetButtonText}
+          </Button>
+
+          {hideHelpButton && (
+            <Button
+              className='fade-in'
+              id='get-help-button'
+              onClick={helpButtonEvent}
+            >
+              <Help />
+              {helpButtonText}
+            </Button>
+          )}
+        </div>
       </div>
     </>
   );