improvement: UI consolidation

Author: emir-karabeg

apps/sim/app/(landing)/careers/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useRef, useState } from 'react'
-import { Loader2, X } from 'lucide-react'
+import { X } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
@@ -499,16 +499,11 @@ export default function CareersPage() {
                   className='min-w-[200px] rounded-[10px] border border-[#6F3DFA] bg-gradient-to-b from-[#8357FF] to-[#6F3DFA] text-white shadow-[inset_0_2px_4px_0_#9B77FF] transition-all duration-300 hover:opacity-90 disabled:opacity-50'
                   size='lg'
                 >
-                  {isSubmitting ? (
-                    <>
-                      <Loader2 className='mr-2 h-4 w-4 animate-spin' />
-                      Submitting...
-                    </>
-                  ) : submitStatus === 'success' ? (
-                    'Submitted'
-                  ) : (
-                    'Submit Application'
-                  )}
+                  {isSubmitting
+                    ? 'Submitting...'
+                    : submitStatus === 'success'
+                      ? 'Submitted'
+                      : 'Submit Application'}
                 </Button>
               </div>
             </form>

apps/sim/app/_styles/globals.css

@@ -8,7 +8,7 @@
  */
 :root {
   --sidebar-width: 232px;
-  --panel-width: 244px;
+  --panel-width: 260px;
   --toolbar-triggers-height: 300px;
   --editor-connections-height: 200px;
   --terminal-height: 196px;
@@ -181,10 +181,10 @@
     --surface-1: #1e1e1e;
     --surface-2: #232323;
     --surface-3: #242424;
-    --surface-4: #282828;
+    --surface-4: #292929;
     --border: #2c2c2c;
     --surface-5: #363636;
-    --surface-11: #3d3d3d;
+    --border-1: #3d3d3d;
     --surface-12: #434343;
     --surface-13: #454545;
     --surface-14: #4a4a4a;
@@ -203,7 +203,7 @@
 
     /* Borders / dividers */
 
-    --border-strong: #303030;
+    /* --border-strong: #303030; */
     --divider: #393939;
     --border-muted: #424242;
     --border-success: #575757;
@@ -224,7 +224,7 @@
     --font-weight-semibold: 550;
 
     /* RGB for opacity usage */
-    --surface-4-rgb: 40 40 40;
+    --surface-4-rgb: 41 41 41;
     --surface-5-rgb: 39 39 39;
     --surface-7-rgb: 44 44 44;
     --surface-9-rgb: 54 54 54;
@@ -606,7 +606,7 @@ input[type="search"]::-ms-clear {
   }
 
   html[data-panel-active-tab="copilot"] .panel-container [data-tab-button="copilot"] {
-    background-color: var(--surface-11) !important;
+    background-color: var(--border-1) !important;
     color: var(--text-primary) !important;
   }
   html[data-panel-active-tab="copilot"] .panel-container [data-tab-button="toolbar"],
@@ -616,7 +616,7 @@ input[type="search"]::-ms-clear {
   }
 
   html[data-panel-active-tab="toolbar"] .panel-container [data-tab-button="toolbar"] {
-    background-color: var(--surface-11) !important;
+    background-color: var(--border-1) !important;
     color: var(--text-primary) !important;
   }
   html[data-panel-active-tab="toolbar"] .panel-container [data-tab-button="copilot"],
@@ -626,7 +626,7 @@ input[type="search"]::-ms-clear {
   }
 
   html[data-panel-active-tab="editor"] .panel-container [data-tab-button="editor"] {
-    background-color: var(--surface-11) !important;
+    background-color: var(--border-1) !important;
     color: var(--text-primary) !important;
   }
   html[data-panel-active-tab="editor"] .panel-container [data-tab-button="copilot"],

apps/sim/app/chat/components/auth/email/email-auth.tsx

@@ -1,7 +1,6 @@
 'use client'
 
 import { type KeyboardEvent, useEffect, useState } from 'react'
-import { Loader2 } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { InputOTP, InputOTPGroup, InputOTPSlot } from '@/components/ui/input-otp'
@@ -299,14 +298,7 @@ export default function EmailAuth({
                     className={`${buttonClass} flex w-full items-center justify-center gap-2 rounded-[10px] border font-medium text-[15px] text-white transition-all duration-200`}
                     disabled={isSendingOtp}
                   >
-                    {isSendingOtp ? (
-                      <>
-                        <Loader2 className='mr-2 h-4 w-4 animate-spin' />
-                        Sending Code...
-                      </>
-                    ) : (
-                      'Continue'
-                    )}
+                    {isSendingOtp ? 'Sending Code...' : 'Continue'}
                   </Button>
                 </form>
               ) : (

apps/sim/app/invite/components/status-card.tsx

@@ -162,14 +162,7 @@ export function InviteStatusCard({
               onClick={action.onClick}
               disabled={action.disabled || action.loading}
             >
-              {action.loading ? (
-                <>
-                  <Loader2 className='mr-2 h-4 w-4 animate-spin' />
-                  {action.label}...
-                </>
-              ) : (
-                action.label
-              )}
+              {action.loading ? `${action.label}...` : action.label}
             </Button>
           ))}
         </div>

apps/sim/app/layout.tsx

@@ -84,7 +84,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
                     var panelWidth = panelState && panelState.panelWidth;
                     var maxPanelWidth = window.innerWidth * 0.4;
 
-                    if (panelWidth >= 244 && panelWidth <= maxPanelWidth) {
+                    if (panelWidth >= 260 && panelWidth <= maxPanelWidth) {
                       document.documentElement.style.setProperty('--panel-width', panelWidth + 'px');
                     } else if (panelWidth > maxPanelWidth) {
                       document.documentElement.style.setProperty('--panel-width', maxPanelWidth + 'px');

apps/sim/app/playground/page.tsx

@@ -317,10 +317,10 @@ export default function PlaygroundPage() {
                 </PopoverContent>
               </Popover>
             </VariantRow>
-            <VariantRow label='primary variant'>
-              <Popover variant='primary'>
+            <VariantRow label='secondary variant'>
+              <Popover variant='secondary'>
                 <PopoverTrigger asChild>
-                  <Button variant='primary'>Primary Popover</Button>
+                  <Button variant='secondary'>Secondary Popover</Button>
                 </PopoverTrigger>
                 <PopoverContent>
                   <PopoverItem>Item 1</PopoverItem>

apps/sim/app/unsubscribe/unsubscribe.tsx

@@ -294,14 +294,14 @@ function UnsubscribeContent() {
               variant='destructive'
               className='w-full'
             >
-              {processing ? (
-                <Loader2 className='mr-2 h-4 w-4 animate-spin' />
-              ) : data?.currentPreferences.unsubscribeAll ? (
+              {data?.currentPreferences.unsubscribeAll ? (
                 <CheckCircle className='mr-2 h-4 w-4' />
               ) : null}
-              {data?.currentPreferences.unsubscribeAll
-                ? 'Unsubscribed from All Emails'
-                : 'Unsubscribe from All Marketing Emails'}
+              {processing
+                ? 'Unsubscribing...'
+                : data?.currentPreferences.unsubscribeAll
+                  ? 'Unsubscribed from All Emails'
+                  : 'Unsubscribe from All Marketing Emails'}
             </Button>
 
             <div className='text-center text-muted-foreground text-sm'>

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/create-chunk-modal/create-chunk-modal.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useRef, useState } from 'react'
-import { AlertCircle, Loader2 } from 'lucide-react'
+import { AlertCircle } from 'lucide-react'
 import {
   Button,
   Label,
@@ -162,14 +162,7 @@ export function CreateChunkModal({
                 type='button'
                 disabled={!isFormValid || isCreating}
               >
-                {isCreating ? (
-                  <>
-                    <Loader2 className='mr-2 h-4 w-4 animate-spin' />
-                    Creating...
-                  </>
-                ) : (
-                  'Create Chunk'
-                )}
+                {isCreating ? 'Creating...' : 'Create Chunk'}
               </Button>
             </ModalFooter>
           </form>

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx

@@ -1,7 +1,6 @@
 'use client'
 
 import { useCallback, useEffect, useState } from 'react'
-import { Loader2 } from 'lucide-react'
 import {
   Button,
   Combobox,
@@ -755,14 +754,7 @@ export function DocumentTagsModal({
                           ))
                       }
                     >
-                      {isSavingTag ? (
-                        <>
-                          <Loader2 className='mr-2 h-4 w-4 animate-spin' />
-                          Creating...
-                        </>
-                      ) : (
-                        'Create Tag'
-                      )}
+                      {isSavingTag ? 'Creating...' : 'Create Tag'}
                     </Button>
                   </div>
                 </div>

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/edit-chunk-modal/edit-chunk-modal.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
-import { AlertCircle, ChevronDown, ChevronUp, Loader2, X } from 'lucide-react'
+import { AlertCircle, ChevronDown, ChevronUp, X } from 'lucide-react'
 import {
   Button,
   Label,
@@ -280,14 +280,7 @@ export function EditChunkModal({
                   type='button'
                   disabled={!isFormValid || isSaving || !hasUnsavedChanges || isNavigating}
                 >
-                  {isSaving ? (
-                    <>
-                      <Loader2 className='mr-2 h-4 w-4 animate-spin' />
-                      Saving...
-                    </>
-                  ) : (
-                    'Save'
-                  )}
+                  {isSaving ? 'Saving...' : 'Save'}
                 </Button>
               )}
             </ModalFooter>