Revert Manage Themes dialog group/theme name input change (#2883)

* revert manage themes group/theme input column

* fix themes no_group label for rename group textinput

---------

Co-authored-by: macintoshhelper <[email protected]>

Author: macintoshhelper

packages/tokens-studio-for-figma/src/app/components/ManageThemesModal/CreateOrEditThemeForm.tsx

@@ -100,13 +100,12 @@ export const CreateOrEditThemeForm: React.FC<React.PropsWithChildren<React.Props
             onClick={onCancel}
           />
           <Stack
-            direction="column"
-            align="start"
+            direction="row"
+            align="center"
             gap={1}
             css={{
               width: '100%',
-              paddingBlock: '$2',
-              minHeight: 'calc( (2 * $controlMedium) + $2 )',
+              paddingBlock: '$4',
               justifyContent: 'space-evenly',
             }}
           >
@@ -118,6 +117,7 @@ export const CreateOrEditThemeForm: React.FC<React.PropsWithChildren<React.Props
                 autofocus
                 data-testid="create-or-edit-theme-form--group--name"
                 {...register('group')}
+                placeholder="Add group"
                 css={{
                   display: 'flex',
                 }}
@@ -142,7 +142,7 @@ export const CreateOrEditThemeForm: React.FC<React.PropsWithChildren<React.Props
                   ) : (
                     <Button
                       data-testid="button-manage-themes-modal-new-group"
-                      variant="invisible"
+                      variant="secondary"
                       icon={<IconPlus />}
                       onClick={handleAddGroup}
                       size="small"
@@ -155,13 +155,16 @@ export const CreateOrEditThemeForm: React.FC<React.PropsWithChildren<React.Props
               </Box>
             )
           }
-              <Box>/</Box>
+              <Box css={{ margin: '0 $3' }}>/</Box>
+            </Stack>
+            <Stack direction="row" gap={1} align="center" css={{ flexGrow: 1 }}>
+              <Input
+                full
+                data-testid="create-or-edit-theme-form--input--name"
+                {...register('name', { required: true })}
+                placeholder="Theme name"
+              />
             </Stack>
-            <Input
-              full
-              data-testid="create-or-edit-theme-form--input--name"
-              {...register('name', { required: true })}
-            />
           </Stack>
 
         </StyledCreateOrEditThemeFormHeaderFlex>
@@ -175,7 +178,7 @@ export const CreateOrEditThemeForm: React.FC<React.PropsWithChildren<React.Props
       )}
       <Stack direction="column" gap={1}>
         {activeTab === ThemeFormTabs.SETS && (
-        <Stack direction="column" gap={1} css={{ padding: '0 $4 $3' }}>
+        <Stack direction="column" gap={1} css={{ padding: '$3 $4 $3' }}>
           <TokenSetTreeContent
             items={treeOrListItems}
             renderItemContent={TokenSetThemeItemInput}

packages/tokens-studio-for-figma/src/app/components/ManageThemesModal/ThemeGroupDropDownMenu.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import { Check } from 'iconoir-react';
-import { DropdownMenu } from '@tokens-studio/ui';
+import { Button, DropdownMenu } from '@tokens-studio/ui';
 import { useTranslation } from 'react-i18next';
 import Box from '../Box';
 import { IconPlus } from '@/icons';
@@ -41,14 +41,24 @@ export const ThemeGroupDropDownMenu: React.FC<React.PropsWithChildren<React.Prop
 
   return (
     <DropdownMenu>
-      <DropdownMenu.Trigger>
+      <DropdownMenu.Trigger asChild>
         {
           selectedGroup ? (
-            <span>{selectedGroup}</span>
+            <Button variant="secondary" asDropdown>
+              <span>{selectedGroup}</span>
+            </Button>
           ) : (
             <Box css={{ display: 'flex', alignItems: 'center', gap: '$2' }}>
-              <IconPlus />
-              Add&nbsp;group
+              <Button
+                data-testid="button-manage-themes-modal-group-dropdown"
+                variant="secondary"
+                icon={<IconPlus />}
+                size="small"
+                css={{ display: 'flex', alignItems: 'center', height: '28px' }}
+                asDropdown
+              >
+                Add&nbsp;group
+              </Button>
             </Box>
           )
         }

packages/tokens-studio-for-figma/src/app/components/ManageThemesModal/ThemeListGroupHeader.tsx

@@ -3,7 +3,6 @@ import React, {
 } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { IconButton } from '@tokens-studio/ui';
-import { styled } from '@stitches/react';
 import { editProhibitedSelector } from '@/selectors';
 import { DragControlsContext } from '@/context';
 import { StyledDragButton } from '../StyledDragger/StyledDragButton';
@@ -13,6 +12,7 @@ import Box from '../Box';
 import Input from '../Input';
 import IconPencil from '@/icons/pencil.svg';
 import { Dispatch } from '@/app/store';
+import { INTERNAL_THEMES_NO_GROUP } from '@/constants/InternalTokenGroup';
 
 type Props = React.PropsWithChildren<{
   groupName: string
@@ -28,7 +28,7 @@ export function ThemeListGroupHeader({
   const dispatch = useDispatch<Dispatch>();
   const dragContext = useContext(DragControlsContext);
   const editProhibited = useSelector(editProhibitedSelector);
-  const [currentGroupName, setCurrentGroupName] = useState(label);
+  const [currentGroupName, setCurrentGroupName] = useState<string>(groupName === INTERNAL_THEMES_NO_GROUP ? '' : groupName);
   const [isEditing, setIsEditing] = useState(false);
   const handleDragStart = useCallback((event: React.PointerEvent<HTMLDivElement>) => {
     dragContext.controls?.start(event);