fix: update feedback

janhq · May 14, 2024 · 24ffdbc · 24ffdbc
1 parent 8140de7
commit 24ffdbc
Show file tree

Hide file tree

Showing 43 changed files with 545 additions and 280 deletions.
diff --git a/core/src/types/model/modelEntity.ts b/core/src/types/model/modelEntity.ts
@@ -22,7 +22,7 @@ export enum InferenceEngine {
   nitro = 'nitro',
   openai = 'openai',
   groq = 'groq',
-  triton_trtllm = 'triton-trtllm',
+  triton_trtllm = 'triton_trtllm',
   nitro_tensorrt_llm = 'nitro-tensorrt-llm',
   cohere = 'cohere',
 }

diff --git a/joi/src/core/Button/index.tsx b/joi/src/core/Button/index.tsx
@@ -12,6 +12,7 @@ const buttonVariants = cva('btn', {
     theme: {
       primary: 'btn--primary',
       ghost: 'btn--ghost',
+      icon: 'btn--icon',
       destructive: 'btn--destructive',
     },
     variant: {

diff --git a/joi/src/core/Button/styles.scss b/joi/src/core/Button/styles.scss
@@ -34,7 +34,6 @@
   // Ghost
   &--ghost {
     background-color: transparent !important;
-
     &.btn--soft {
       background-color: transparent !important;
     }
@@ -70,30 +69,63 @@
 
   // Disabled
   &:disabled {
-    color: hsla(var(--app-disabled-fg));
-    background-color: hsla(var(--app-disabled-bg)) !important;
+    color: hsla(var(--disabled-fg));
+    background-color: hsla(var(--disabled-bg)) !important;
     cursor: not-allowed;
 
     &:hover {
       filter: brightness(100%);
     }
   }
 
+  // Icon
+  &--icon {
+    width: 24px;
+    height: 24px;
+    padding: 2px;
+    &:hover {
+      background-color: hsla(var(--icon-bg)) !important;
+    }
+
+    &.btn--outline {
+      background-color: transparent !important;
+      border: 1px solid hsla(var(--icon-border));
+      &:hover {
+        background-color: hsla(var(--icon-bg)) !important;
+      }
+    }
+  }
+
   // Size
   &--small {
     @apply h-6 px-2;
     font-size: 12px;
-    border-radius: 6px;
+    border-radius: 4px;
+    &.btn--icon {
+      width: 24px;
+      height: 24px;
+      padding: 2px;
+    }
   }
 
   &--medium {
-    @apply h-9;
-    border-radius: 8px;
+    @apply h-8;
+    border-radius: 6px;
+    &.btn--icon {
+      width: 24px;
+      height: 24px;
+      padding: 2px;
+    }
   }
 
   &--large {
-    @apply h-11;
-    border-radius: 10px;
+    @apply h-9;
+    border-radius: 8px;
+    &.btn--icon {
+      width: 24px;
+      height: 24px;
+      padding: 2px;
+    }
   }
 
   &--block {

diff --git a/joi/src/core/Checkbox/styles.scss b/joi/src/core/Checkbox/styles.scss
@@ -18,7 +18,7 @@
     }
 
     &:disabled {
-      background-color: hsla(var(--disabled-bg));
+      background-color: hsla(var(----disabled-bg));
       color: hsla(var(--disabled-fg));
 
       &:checked {
@@ -45,7 +45,7 @@
   }
 
   &:disabled {
-    background-color: hsla(var(--disabled-bg));
+    background-color: hsla(var(----disabled-bg));
     color: hsla(var(--disabled-fg));
   }
 }
diff --git a/joi/src/core/Input/index.tsx b/joi/src/core/Input/index.tsx
@@ -7,14 +7,26 @@ export interface Props extends React.InputHTMLAttributes<HTMLInputElement> {
   textAlign?: 'left' | 'right'
   prefixIcon?: ReactNode
   suffixIcon?: ReactNode
+  onCLick?: () => void
 }
 
 const Input = forwardRef<HTMLInputElement, Props>(
-  ({ className, type, textAlign, prefixIcon, suffixIcon, ...props }, ref) => {
+  (
+    { className, type, textAlign, prefixIcon, suffixIcon, onClick, ...props },
+    ref
+  ) => {
     return (
       <div className="input__wrapper">
-        {prefixIcon && <div className="input__prefix-icon">{prefixIcon}</div>}
-        {suffixIcon && <div className="input__suffix-icon">{suffixIcon}</div>}
+        {prefixIcon && (
+          <div className="input__prefix-icon" onClick={onClick}>
+            {prefixIcon}
+          </div>
+        )}
+        {suffixIcon && (
+          <div className="input__suffix-icon" onClick={onClick}>
+            {suffixIcon}
+          </div>
+        )}
         <input
           type={type}
           className={twMerge(
@@ -23,6 +35,7 @@ const Input = forwardRef<HTMLInputElement, Props>(
             textAlign === 'right' && 'text-right'
           )}
           ref={ref}
+          onClick={onClick}
           {...props}
         />
       </div>

diff --git a/joi/src/core/Input/styles.scss b/joi/src/core/Input/styles.scss
@@ -1,7 +1,7 @@
 .input {
   background-color: hsla(var(--input-bg));
   border: 1px solid hsla(var(--input-border));
-  @apply inline-flex h-9 w-full items-center rounded-lg border px-3 transition-colors;
+  @apply inline-flex h-8 w-full items-center rounded-md border px-3 transition-colors;
   @apply focus-within:outline-none focus-visible:outline-0 focus-visible:ring-1 focus-visible:ring-[hsla(var(--primary-bg))] focus-visible:ring-offset-0;
   @apply file:border-0 file:bg-transparent file:font-medium;
 
@@ -18,22 +18,22 @@
   }
 
   &:disabled {
-    color: hsla(var(--app-disabled-fg));
-    background-color: hsla(var(--app-disabled-bg));
+    color: hsla(var(--disabled-fg));
+    background-color: hsla(var(--disabled-bg));
     cursor: not-allowed;
     border: none;
   }
 
   &__prefix-icon {
-    @apply absolute left-3 top-1/2 -translate-y-1/2;
+    @apply absolute left-3 top-1/2 -translate-y-1/2 cursor-pointer;
     color: hsla(var(--input-icon));
     + .input {
       padding-left: 32px;
     }
   }
 
   &__suffix-icon {
-    @apply absolute right-3 top-1/2 -translate-y-1/2;
+    @apply absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer;
     color: hsla(var(--input-icon));
     + .input {
       padding-right: 32px;

diff --git a/joi/src/core/ScrollArea/styles.scss b/joi/src/core/ScrollArea/styles.scss
@@ -44,17 +44,17 @@
 }
 
 .scroll-area__bar[data-orientation='vertical'] {
-  width: 6px;
+  width: 8px;
 }
 
 .scroll-area__bar[data-orientation='horizontal'] {
   flex-direction: column;
-  height: 6px;
+  height: 8px;
 }
 
 ::-webkit-scrollbar {
-  width: 4px;
-  height: 4px;
+  width: 6px;
+  height: 6px;
 }
 ::-webkit-scrollbar-track,
 ::-webkit-scrollbar-thumb {

diff --git a/joi/src/core/Select/styles.scss b/joi/src/core/Select/styles.scss
@@ -2,7 +2,7 @@
   padding: 0 16px;
   background-color: hsla(var(--select-bg)) !important;
   border: 1px solid hsla(var(--select-border));
-  @apply inline-flex h-9 items-center justify-between gap-8 rounded-lg px-3 transition-colors;
+  @apply inline-flex h-7 items-center justify-between gap-8 rounded-md px-3 transition-colors;
   @apply focus-within:outline-none focus-visible:outline-0 focus-visible:ring-1 focus-visible:ring-[hsla(var(--primary-bg))] focus-visible:ring-offset-0;
 
   &[data-placeholder] {
@@ -29,8 +29,8 @@
 
   &__disabled {
     cursor: not-allowed;
-    background-color: hsla(var(--app-disabled-bg)) !important;
-    color: hsla(var(--app-disabled-fg));
+    background-color: hsla(var(--disabled-bg)) !important;
+    color: hsla(var(--disabled-fg));
     border: none;
   }
 

diff --git a/joi/src/core/Slider/styles.scss b/joi/src/core/Slider/styles.scss
@@ -11,7 +11,7 @@
     position: relative;
     flex-grow: 1;
     border-radius: 9999px;
-    height: 6px;
+    height: 4px;
   }
 
   &__range {

diff --git a/joi/src/core/Switch/styles.scss b/joi/src/core/Switch/styles.scss
@@ -1,8 +1,8 @@
 .switch {
   position: relative;
   display: inline-block;
-  width: 48px;
-  height: 24px;
+  width: 32px;
+  height: 18px;
 
   > input {
     opacity: 0;
@@ -13,9 +13,9 @@
     &:disabled {
       + .switch--thumb {
         cursor: not-allowed;
-        background-color: hsla(var(--app-disabled-bg));
+        background-color: hsla(var(--disabled-bg));
         &:before {
-          background-color: hsla(var(--app-disabled-fg));
+          background-color: hsla(var(--disabled-fg));
         }
       }
       // disabled and checked
@@ -32,9 +32,9 @@
       background-color: hsla(var(--primary-bg));
 
       &::before {
-        -webkit-transform: translateX(24px);
-        -ms-transform: translateX(24px);
-        transform: translateX(24px);
+        -webkit-transform: translateX(14px);
+        -ms-transform: translateX(14px);
+        transform: translateX(14px);
       }
     }
   }
@@ -54,8 +54,8 @@
     &:before {
       position: absolute;
       content: '';
-      height: 20px;
-      width: 20px;
+      height: 14px;
+      width: 14px;
       left: 2px;
       bottom: 2px;
       background-color: hsla(var(--switch-fg));

diff --git a/joi/src/core/TextArea/styles.scss b/joi/src/core/TextArea/styles.scss
@@ -1,7 +1,7 @@
 .textarea {
   background-color: hsla(var(--textarea-bg));
   border: 1px solid hsla(var(--textarea-border));
-  @apply inline-flex w-full items-center rounded-lg border p-3 transition-colors;
+  @apply inline-flex w-full items-center rounded-md border p-3 transition-colors;
   @apply focus-within:outline-none focus-visible:outline-0 focus-visible:ring-1 focus-visible:ring-[hsla(var(--primary-bg))] focus-visible:ring-offset-0;
   @apply file:border-0 file:bg-transparent file:font-medium;
 
@@ -18,8 +18,8 @@
   }
 
   &:disabled {
-    color: hsla(var(--app-disabled-fg));
-    background-color: hsla(var(--app-disabled-bg));
+    color: hsla(var(--disabled-fg));
+    background-color: hsla(var(--disabled-bg));
     cursor: not-allowed;
     border: none;
   }
@@ -36,8 +36,8 @@
     cursor: auto;
   }
   &::-webkit-scrollbar {
-    width: 4px;
-    height: 4px;
+    width: 6px;
+    height: 6px;
   }
   &::-webkit-scrollbar-track,
   &::-webkit-scrollbar-thumb {

diff --git a/web/containers/Layout/BottomPanel/DownloadingState/index.tsx b/web/containers/Layout/BottomPanel/DownloadingState/index.tsx
@@ -74,8 +74,6 @@ export default function DownloadingState() {
                     </div>
                     <Button
                       theme="destructive"
-                      variant="outline"
-                      size="small"
                       onClick={() => {
                         if (item?.modelId) {
                           const model = downloadingModels.find(

diff --git a/web/containers/Layout/BottomPanel/SystemMonitor/index.tsx b/web/containers/Layout/BottomPanel/SystemMonitor/index.tsx
@@ -77,7 +77,7 @@ const SystemMonitor = () => {
         <div
           ref={setElementExpand}
           className={twMerge(
-            'fixed bottom-[28px] left-9 z-50 flex w-[calc(100%-36px)] flex-shrink-0 flex-col border-t border-[hsla(var(--bottom-panel-border))] bg-[hsla(var(--app-bg))]',
+            'fixed bottom-9 left-12 z-50 flex w-[calc(100%-48px)] flex-shrink-0 flex-col border-t border-[hsla(var(--bottom-panel-border))] bg-[hsla(var(--app-bg))]',
             showFullScreen && 'h-[calc(100%-63px)]'
           )}
         >

diff --git a/web/containers/Layout/BottomPanel/index.tsx b/web/containers/Layout/BottomPanel/index.tsx
@@ -14,7 +14,7 @@ const BottomPanel = () => {
   const progress = useAtomValue(appDownloadProgressAtom)
 
   return (
-    <div className="fixed bottom-0 left-0 z-50 flex h-[28px] w-full items-center justify-between border-t border-[hsla(var(--bottom-panel-border))] bg-[hsla(var(--bottom-panel-bg))] px-3 text-xs">
+    <div className="fixed bottom-0 left-0 z-50 flex h-9 w-full items-center justify-between border-t border-[hsla(var(--bottom-panel-border))] bg-[hsla(var(--bottom-panel-bg))] px-3 text-xs">
       <div className="flex flex-shrink-0 items-center gap-x-2">
         <div className="flex items-center space-x-2">
           {progress && progress > 0 ? (

diff --git a/web/containers/Layout/RibbonPanel/index.tsx b/web/containers/Layout/RibbonPanel/index.tsx
@@ -31,34 +31,34 @@ export default function RibbonPanel() {
   const RibbonNavMenus = [
     {
       name: 'Thread',
-      icon: <MessageCircleIcon size={16} className="flex-shrink-0" />,
+      icon: <MessageCircleIcon size={18} className="flex-shrink-0" />,
       state: MainViewState.Thread,
     },
     {
       name: 'Hub',
-      icon: <LayoutGridIcon size={16} className="flex-shrink-0" />,
+      icon: <LayoutGridIcon size={18} className="flex-shrink-0" />,
       state: MainViewState.Hub,
     },
     {
       name: 'Local API Server',
-      icon: <SquareCodeIcon size={16} className="flex-shrink-0" />,
+      icon: <SquareCodeIcon size={18} className="flex-shrink-0" />,
       state: MainViewState.LocalServer,
     },
     {
       name: 'Settings',
-      icon: <SettingsIcon size={16} className="flex-shrink-0" />,
+      icon: <SettingsIcon size={18} className="flex-shrink-0" />,
       state: MainViewState.Settings,
     },
   ]
 
   return (
-    <div className="flex w-9 flex-shrink-0 flex-col items-center border-r border-[hsla(var(--ribbon-panel-border))] bg-[hsla(var(--ribbon-panel-bg))] py-2">
+    <div className="flex w-12 flex-shrink-0 flex-col items-center border-r border-[hsla(var(--ribbon-panel-border))] bg-[hsla(var(--ribbon-panel-bg))] py-2">
       {RibbonNavMenus.filter((menu) => !!menu).map((menu, i) => {
         const isActive = mainViewState === menu.state
         return (
           <div
             className={twMerge(
-              'relative my-0.5 flex p-1',
+              'relative my-0.5 flex h-8 w-8 items-center justify-center',
               i === 1 && 'mb-auto'
             )}
             key={i}
@@ -71,7 +71,7 @@ export default function RibbonPanel() {
                   <div
                     data-testid={menu.name}
                     className={twMerge(
-                      'relative flex w-full flex-shrink-0 cursor-pointer items-center justify-center text-[hsla(var(--ribbon-panel-icon))]',
+                      'relative flex w-full flex-shrink-0 cursor-pointer items-center justify-center text-[hsla(var(--ribbon-panel-icon))] ',
                       isActive &&
                         'z-10 text-[hsla(var(--ribbon-panel-icon-active))]'
                     )}