From 9896883dcf8e269508f9f646a0248e22cfbc384c Mon Sep 17 00:00:00 2001
From: Ilya Topilskii <iatopilskii@gmail.com>
Date: Mon, 3 Feb 2025 19:12:34 +0100
Subject: [PATCH] fix: small fixes after design review

---
 .../subjects/views/repo-list/repo-list.tsx    |  22 ++-
 .../views/repo-summary/repo-summary.tsx       |  38 ++--
 .../language-selector/language-dialog.tsx     |  15 +-
 .../theme-selector-v2/theme-dialog.tsx        | 174 +++++++++---------
 4 files changed, 133 insertions(+), 116 deletions(-)

diff --git a/apps/design-system/src/subjects/views/repo-list/repo-list.tsx b/apps/design-system/src/subjects/views/repo-list/repo-list.tsx
index c8ffebcfe..b5d8acad9 100644
--- a/apps/design-system/src/subjects/views/repo-list/repo-list.tsx
+++ b/apps/design-system/src/subjects/views/repo-list/repo-list.tsx
@@ -2,6 +2,7 @@ import { FC, useCallback } from 'react'
 
 import { noop, useTranslationsStore } from '@utils/viewUtils'
 
+import { LanguageDialog } from '@harnessio/ui/components'
 import { RepoListProps, SandboxRepoListPage } from '@harnessio/ui/views'
 
 import repoListStore from './repo-list-store.json'
@@ -17,15 +18,18 @@ const RepoListWrapper: FC<Partial<RepoListProps>> = props => {
   )
 
   return (
-    <SandboxRepoListPage
-      useRepoStore={useRepoListStore}
-      useTranslationStore={useTranslationsStore}
-      isLoading={false}
-      isError={false}
-      searchQuery=""
-      setSearchQuery={noop}
-      {...props}
-    />
+    <>
+      <SandboxRepoListPage
+        useRepoStore={useRepoListStore}
+        useTranslationStore={useTranslationsStore}
+        isLoading={false}
+        isError={false}
+        searchQuery=""
+        setSearchQuery={noop}
+        {...props}
+      />
+      <LanguageDialog open onOpenChange={() => {}} onChange={() => {}} onSave={() => {}} onCancel={() => {}} />
+    </>
   )
 }
 
diff --git a/apps/design-system/src/subjects/views/repo-summary/repo-summary.tsx b/apps/design-system/src/subjects/views/repo-summary/repo-summary.tsx
index 50507bc92..c4367e073 100644
--- a/apps/design-system/src/subjects/views/repo-summary/repo-summary.tsx
+++ b/apps/design-system/src/subjects/views/repo-summary/repo-summary.tsx
@@ -2,6 +2,7 @@ import { FC, useCallback, useMemo } from 'react'
 
 import { useTranslationsStore } from '@utils/viewUtils'
 
+import { ThemeDialog } from '@harnessio/ui/components'
 import { BranchSelectorTab, IBranchSelectorStore, RepoSummaryView, RepoSummaryViewProps } from '@harnessio/ui/views'
 
 import repoSummaryProps from './repo-summary-props.json'
@@ -35,23 +36,26 @@ const RepoSummaryViewWrapper: FC<Partial<RepoSummaryViewProps>> = props => {
   )
 
   return (
-    <RepoSummaryView
-      {...repoSummaryProps}
-      repoEntryPathToFileTypeMap={repoEntryPathToFileTypeMap}
-      saveDescription={noop}
-      handleCreateToken={noop}
-      navigateToFile={noop}
-      useTranslationStore={useTranslationsStore}
-      useRepoBranchesStore={useRepoBranchesStore}
-      gitRef=""
-      updateRepoError=""
-      isEditDialogOpen={false}
-      setEditDialogOpen={noop}
-      selectBranchOrTag={noop}
-      searchQuery=""
-      setSearchQuery={noop}
-      {...props}
-    />
+    <>
+      <RepoSummaryView
+        {...repoSummaryProps}
+        repoEntryPathToFileTypeMap={repoEntryPathToFileTypeMap}
+        saveDescription={noop}
+        handleCreateToken={noop}
+        navigateToFile={noop}
+        useTranslationStore={useTranslationsStore}
+        useRepoBranchesStore={useRepoBranchesStore}
+        gitRef=""
+        updateRepoError=""
+        isEditDialogOpen={false}
+        setEditDialogOpen={noop}
+        selectBranchOrTag={noop}
+        searchQuery=""
+        setSearchQuery={noop}
+        {...props}
+      />
+      <ThemeDialog open onOpenChange={() => {}} onChange={() => {}} />
+    </>
   )
 }
 
diff --git a/packages/ui/src/components/language-selector/language-dialog.tsx b/packages/ui/src/components/language-selector/language-dialog.tsx
index 064363c92..deed2f4c4 100644
--- a/packages/ui/src/components/language-selector/language-dialog.tsx
+++ b/packages/ui/src/components/language-selector/language-dialog.tsx
@@ -28,7 +28,7 @@ const LanguageDialog: FC<LanguageDialogProps> = ({
       {!!children && <Dialog.Trigger asChild>{children}</Dialog.Trigger>}
       <Dialog.Content className="max-w-[400px]">
         <Dialog.Title className="text-20 font-medium">Language</Dialog.Title>
-        <div className="flex flex-col gap-3">
+        <div className="mt-1 flex flex-col gap-3">
           {languages.map(lang => (
             <button
               key={lang.code}
@@ -39,12 +39,19 @@ const LanguageDialog: FC<LanguageDialogProps> = ({
               }}
             >
               <div className="flex items-center gap-2">
-                <div className="bg-background-12 text-12 text-foreground-3 flex size-6 items-center justify-center rounded-sm">
+                <div className="bg-background-12 text-12 text-foreground-3 flex size-6 items-center justify-center rounded">
                   {lang.code}
                 </div>
-                <span className="text-foreground-1">{lang.name}</span>
+                <span
+                  className={cn(
+                    'group-hover:text-foreground-1',
+                    selectedLanguage === lang.code ? 'text-foreground-1' : 'text-foreground-2'
+                  )}
+                >
+                  {lang.name}
+                </span>
               </div>
-              {selectedLanguage === lang.code && <Icon className="text-icons-2 " name="tick" size={12} />}
+              {selectedLanguage === lang.code && <Icon className="text-icons-2" name="tick" size={12} />}
               <span
                 className={cn(
                   'absolute -inset-x-2 -inset-y-1 rounded group-hover:bg-background-4 group-focus-visible:outline group-focus-visible:outline-offset-2 group-focus-visible:outline-borders-accent group-focus-visible:outline-2',
diff --git a/packages/ui/src/components/theme-selector-v2/theme-dialog.tsx b/packages/ui/src/components/theme-selector-v2/theme-dialog.tsx
index f7fa84b3d..db2b3c930 100644
--- a/packages/ui/src/components/theme-selector-v2/theme-dialog.tsx
+++ b/packages/ui/src/components/theme-selector-v2/theme-dialog.tsx
@@ -29,102 +29,104 @@ const ThemeDialog: FC<ThemeDialogProps> = ({ defaultTheme, theme, open, onOpenCh
     <Dialog.Root open={open} onOpenChange={onOpenChange}>
       {!!children && <Dialog.Trigger asChild>{children}</Dialog.Trigger>}
       <Dialog.Content className="max-w-[538px]">
-        <Dialog.Title className="text-20 font-medium">Appearance Settings</Dialog.Title>
+        <Dialog.Title className="text-20 font-medium">Appearance settings</Dialog.Title>
         {/* Mode */}
-        <div className="mt-1 grid grid-cols-[246px_1fr] gap-x-8">
-          <div>
-            <span className="text-16 font-medium text-foreground-1">Mode</span>
-            <p className="mt-1.5 text-14 leading-snug text-foreground-3">
-              Choose Dark mode for low light or Light mode for bright spaces.
-            </p>
+        <div className="mt-1 flex flex-col gap-y-5">
+          <div className="grid grid-cols-[246px_1fr] gap-x-8">
+            <div>
+              <span className="text-16 text-foreground-1 font-medium">Mode</span>
+              <p className="text-14 text-foreground-3 mt-1.5 leading-snug">
+                Choose Dark mode for low light or Light mode for bright spaces.
+              </p>
+            </div>
+            <Select name="mode" value={mode} onValueChange={(value: Mode) => setMode(value)} placeholder="Select">
+              <SelectContent>
+                {Object.values(Mode).map(item => (
+                  <SelectItem key={item} value={item}>
+                    {item}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           </div>
-          <Select name="mode" value={mode} onValueChange={(value: Mode) => setMode(value)} placeholder="Select">
-            <SelectContent>
-              {Object.values(Mode).map(item => (
-                <SelectItem key={item} value={item}>
-                  {item}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
 
-        <Separator className="h-px bg-[#1D1D20]" />
+          <Separator className="h-px bg-[#1D1D20]" />
 
-        {/* Contrast */}
-        <div className="grid grid-cols-[246px_1fr] gap-x-8">
-          <div>
-            <span className="text-16 font-medium text-foreground-1">Contrast</span>
-            <p className="mt-1.5 text-14 leading-snug text-foreground-3">
-              High contrast improves readability, Dimmer mode reduces glare.
-            </p>
+          {/* Contrast */}
+          <div className="grid grid-cols-[246px_1fr] gap-x-8">
+            <div>
+              <span className="text-16 text-foreground-1 font-medium">Contrast</span>
+              <p className="text-14 text-foreground-3 mt-1.5 leading-snug">
+                High contrast improves readability, Dimmer mode reduces glare.
+              </p>
+            </div>
+            <Select
+              name="contrast"
+              value={contrast}
+              onValueChange={(value: Contrast) => setContrast(value)}
+              placeholder="Select"
+            >
+              <SelectContent>
+                {Object.values(Contrast).map(item => (
+                  <SelectItem key={item} value={item}>
+                    {item}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           </div>
-          <Select
-            name="contrast"
-            value={contrast}
-            onValueChange={(value: Contrast) => setContrast(value)}
-            placeholder="Select"
-          >
-            <SelectContent>
-              {Object.values(Contrast).map(item => (
-                <SelectItem key={item} value={item}>
-                  {item}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
 
-        <Separator className="h-px bg-[#1D1D20]" />
+          <Separator className="h-px bg-[#1D1D20]" />
 
-        {/* Color Adjustment */}
-        <div className="grid grid-cols-[246px_1fr] gap-x-8">
-          <div>
-            <span className="text-16 font-medium text-foreground-1">Color Adjustment</span>
-            <p className="mt-1.5 text-14 leading-snug text-foreground-3">
-              Adjust colors for different types of color blindness.
-            </p>
+          {/* Color Adjustment */}
+          <div className="grid grid-cols-[246px_1fr] gap-x-8">
+            <div>
+              <span className="text-16 text-foreground-1 font-medium">Color adjustment</span>
+              <p className="text-14 text-foreground-3 mt-1.5 leading-snug">
+                Adjust colors for different types of color blindness.
+              </p>
+            </div>
+            <Select
+              name="color-adjustment"
+              value={colorAdjustment}
+              onValueChange={(value: ColorAdjustment) => setColorAdjustment(value)}
+              placeholder="Select"
+            >
+              <SelectContent>
+                {Object.values(ColorAdjustment).map(item => (
+                  <SelectItem key={item} value={item}>
+                    {item}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           </div>
-          <Select
-            name="color-adjustment"
-            value={colorAdjustment}
-            onValueChange={(value: ColorAdjustment) => setColorAdjustment(value)}
-            placeholder="Select"
-          >
-            <SelectContent>
-              {Object.values(ColorAdjustment).map(item => (
-                <SelectItem key={item} value={item}>
-                  {item}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
 
-        <Separator className="h-px bg-[#1D1D20]" />
+          <Separator className="h-px bg-[#1D1D20]" />
 
-        {/* Accent Color */}
-        <div className="grid grid-cols-[246px_1fr] gap-x-8">
-          <div>
-            <span className="text-16 font-medium text-foreground-1">Accent Color</span>
-            <p className="mt-1.5 text-14 leading-snug text-foreground-3">Select your application accent color.</p>
-          </div>
-          <div className="flex flex-wrap gap-1.5">
-            {Object.values(AccentColor).map(item => (
-              <button
-                key={item}
-                className={cn(
-                  'focus-visible:rounded-full h-[26px] w-[26px] rounded-full',
-                  accentColor === item && 'border border-white'
-                )}
-                onClick={() => {
-                  setAccentColor(item)
-                  onChange({ accentColor: item, mode, contrast, colorAdjustment })
-                }}
-              >
-                <span style={{ backgroundColor: item }} className="m-auto block size-[18px] rounded-full" />
-              </button>
-            ))}
+          {/* Accent Color */}
+          <div className="grid grid-cols-[246px_1fr] gap-x-8">
+            <div>
+              <span className="text-16 text-foreground-1 font-medium">Accent color</span>
+              <p className="text-14 text-foreground-3 mt-1.5 leading-snug">Select your application accent color.</p>
+            </div>
+            <div className="flex flex-wrap gap-1.5">
+              {Object.values(AccentColor).map(item => (
+                <button
+                  key={item}
+                  className={cn(
+                    'focus-visible:rounded-full h-[26px] w-[26px] rounded-full',
+                    accentColor === item && 'border border-white'
+                  )}
+                  onClick={() => {
+                    setAccentColor(item)
+                    onChange({ accentColor: item, mode, contrast, colorAdjustment })
+                  }}
+                >
+                  <span style={{ backgroundColor: item }} className="m-auto block size-[18px] rounded-full" />
+                </button>
+              ))}
+            </div>
           </div>
         </div>
       </Dialog.Content>