Add icon to plain text button

nasa-gcn · Feb 22, 2024 · 38c3dfa · 38c3dfa
1 parent 1d7bb05
commit 38c3dfa
Showing 1 changed file with 4 additions and 8 deletions.
diff --git a/app/routes/_gcn.circulars.edit.$circularId/RichEditor/index.tsx b/app/routes/_gcn.circulars.edit.$circularId/RichEditor/index.tsx
@@ -30,6 +30,7 @@ import { onKeyDown } from './onKeyDown'
 import styles from './index.module.css'
 import iconBold from '@gitlab/svgs/dist/sprite_icons/bold.svg'
 import iconCode from '@gitlab/svgs/dist/sprite_icons/code.svg'
+import iconText from '@gitlab/svgs/dist/sprite_icons/doc-text.svg'
 import iconEllipsis from '@gitlab/svgs/dist/sprite_icons/ellipsis_h.svg'
 import iconHeading from '@gitlab/svgs/dist/sprite_icons/heading.svg'
 import iconItalic from '@gitlab/svgs/dist/sprite_icons/italic.svg'
@@ -58,7 +59,8 @@ function PlainTextButton({
 >) {
   return (
     <SlimButton outline={!checked} type="button" {...props}>
-      Plain Text
+      <GitLabIcon src={iconText} className="width-2 height-2" />
+      <span className="display-none tablet-lg:display-inline"> Plain Text</span>
     </SlimButton>
   )
 }
@@ -371,19 +373,13 @@ export function RichEditor({
             name="format"
             value={markdown ? 'text/markdown' : 'text/plain'}
           />
-          <ButtonGroup
-            type="segmented"
-            className="display-none desktop:display-flex"
-          >
+          <ButtonGroup type="segmented">
             <PlainTextButton
               {...toggleMarkdownButtonProps}
               checked={!markdown}
             />
             <MarkdownButton {...toggleMarkdownButtonProps} checked={markdown} />
           </ButtonGroup>
-          <ButtonGroup className="display-inline-block desktop:display-none">
-            <MarkdownButton {...toggleMarkdownButtonProps} checked={markdown} />
-          </ButtonGroup>
         </Grid>
         {editing && (
           <Grid