fix: Minor UI Changes (#643)

* Minor UI Fixes * Link Icon, from index.ts * Import from components instead of svg * Fix Sidebar and Icons
2025-12-17 00:40:14 +01:00 · 2023-07-14 22:03:28 +05:30 · 2023-07-14 22:03:28 +05:30 · 50374f7539
commit 50374f7539
parent 1a21eb5bae
8 changed files with 41 additions and 574 deletions
--- a/client/src/components/Input/index.jsx
+++ b/client/src/components/Input/index.jsx
@ -135,7 +135,7 @@ export default function TextChat({ isSearchView = false }) {

  return (
    <>
-      <div className="fixed bottom-0 left-0 w-full md:absolute">
+      <div className="fixed bottom-0 left-0 w-full md:absolute border-transparent bg-gradient-to-b from-transparent via-white to-white pt-6 dark:border-white/20 dark:via-gray-800 dark:to-gray-800">
        <div className="relative py-2 md:mb-[-16px] md:py-4 lg:mb-[-32px]">
          <span className="flex w-full flex-col items-center justify-center gap-0 md:order-none md:m-auto md:gap-2">
            <OpenAIOptions />
--- a/client/src/components/Nav/NavLinks.jsx
+++ b/client/src/components/Nav/NavLinks.jsx
@ -2,8 +2,6 @@ import { Menu, Transition } from '@headlessui/react';
 import { Fragment, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import SearchBar from './SearchBar';
-import TrashIcon from '../svg/TrashIcon';
-import GearIcon from '../svg/GearIcon';
 import Settings from './Settings';
 import { Download } from 'lucide-react';
 import NavLink from './NavLink';
@ -12,9 +10,9 @@ import ClearConvos from './ClearConvos';
 import Logout from './Logout';
 import { useAuthContext } from '~/hooks/AuthContext';
 import { cn } from '~/utils/';
-import DotsIcon from '../svg/DotsIcon';

 import store from '~/store';
+import { LinkIcon, DotsIcon, GearIcon, TrashIcon } from '~/components';

 export default function NavLinks({ clearSearch, isSearchEnabled }) {
  const [showExports, setShowExports] = useState(false);
@ -96,6 +94,14 @@ export default function NavLinks({ clearSearch, isSearchEnabled }) {
                    clickHandler={() => setShowClearConvos(true)}
                  />
                </Menu.Item>
+                <Menu.Item as="div">
+                  <NavLink
+                    className="flex w-full cursor-pointer items-center gap-3 px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700 rounded-none"
+                    svg={() => <LinkIcon />}
+                    text="Help & FAQ"
+                    clickHandler={() => window.open('https://docs.librechat.ai/', '_blank')}
+                  />
+                </Menu.Item>
                <Menu.Item as="div">
                  <NavLink
                    className="flex w-full cursor-pointer items-center gap-3 px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700 rounded-none"
--- a/client/src/components/Nav/NewChat.jsx
+++ b/client/src/components/Nav/NewChat.jsx
@ -1,8 +1,11 @@
 import React from 'react';
 import store from '~/store';
+import { useRecoilValue } from 'recoil';
+import { localize } from '~/localization/Translation';

 export default function NewChat() {
  const { newConversation } = store.useConversation();
+  const lang = useRecoilValue(store.lang);

  const clickHandler = () => {
    // dispatch(setInputValue(''));
@ -30,7 +33,7 @@ export default function NewChat() {
        <line x1="12" y1="5" x2="12" y2="19" />
        <line x1="5" y1="12" x2="19" y2="12" />
      </svg>
-      New chat
+      {localize(lang, 'com_ui_new_chat')}
    </a>
  );
 }
--- a/client/src/components/Nav/index.jsx
+++ b/client/src/components/Nav/index.jsx
@ -179,7 +179,7 @@ export default function Nav({ navVisible, setNavVisible }) {
        <div className="flex h-full min-h-0 flex-col ">
          <div className="scrollbar-trigger relative flex h-full w-full flex-1 items-start border-white/20">
            <nav className="relative flex h-full flex-1 flex-col space-y-1 p-2">
-              <div className='flex flex-row h-11'>
+              <div className='flex flex-row h-11 mb-2'>
                <NewChat />
                <button
                  type='button'
@ -223,7 +223,7 @@ export default function Nav({ navVisible, setNavVisible }) {
      {!navVisible && (
        <button
          type="button"
-          className="nav-open-button mt-1 fixed left-2 top-0.5 z-10 inline-flex h-11 w-11 items-center justify-center rounded-md border border-black/10 dark:border-white/20 bg-white dark:bg-gray-800 text-black hover:text-gray-500 dark:text-white dark:hover:text-gray-400"
+          className="nav-open-button mt-1 fixed left-2 top-0.5 z-10 flex p-3 items-center gap-3 transition-colors duration-200 cursor-pointer text-sm rounded-md border bg-white dark:bg-gray-800 border-black/10 dark:border-white/20 hover:bg-gray-50 dark:hover:bg-gray-700 h-11 w-11 text-gray-900"
          onClick={toggleNavVisible}
        >
          <div className="flex items-center justify-center">
--- a/client/src/components/svg/DotsIcon.tsx
+++ b/client/src/components/svg/DotsIcon.tsx
--- a/client/src/components/svg/LinkIcon.tsx
+++ b/client/src/components/svg/LinkIcon.tsx
@ -0,0 +1,20 @@
+export default function LinkIcon() {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="none"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="h-4 w-4"
+      height="1em"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
+      <polyline points="15 3 21 3 21 9"></polyline>
+      <line x1="10" y1="14" x2="21" y2="3"></line>
+    </svg>
+  );
+}
--- a/client/src/components/svg/index.ts
+++ b/client/src/components/svg/index.ts
@ -11,3 +11,7 @@ export { default as OpenIDIcon } from './OpenIDIcon';
 export { default as GithubIcon } from './GithubIcon';
 export { default as DiscordIcon } from './DiscordIcon';
 export { default as AnthropicIcon } from './AnthropicIcon';
+export { default as LinkIcon } from './LinkIcon';
+export { default as DotsIcon } from './DotsIcon';
+export { default as GearIcon } from './GearIcon';
+export { default as TrashIcon } from './TrashIcon';
--- a/client/src/style.css
+++ b/client/src/style.css
@ -882,18 +882,6 @@ pre[class*='language-'] {
  color: #f22c3d;
 }

-.dark .dark\:md\:bg-vert-dark-gradient {
-  background-image: linear-gradient(180deg, rgba(53, 55, 64, 0), #353740 58.85%);
-}
-
-.md\:bg-vert-light-gradient {
-  background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 13.94%, #fff 54.73%);
-}
-
-.md\:\!bg-transparent {
-  background-color: transparent !important;
-}
-
 [role='button'],
 button {
  cursor: pointer;
@ -1276,162 +1264,6 @@ html {
  --tw-prose-th-borders: var(--tw-prose-invert-th-borders);
  --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
 }
-.dark .dark\:border-gray-600 {
-  --tw-border-opacity: 1;
-  border-color: rgba(86, 88, 105, var(--tw-border-opacity));
-}
-.dark .dark\:border-gray-900\/50 {
-  border-color: rgba(32, 33, 35, 0.5);
-}
-.dark .dark\:border-gray-700 {
-  --tw-border-opacity: 1;
-  border-color: rgba(64, 65, 79, var(--tw-border-opacity));
-}
-.dark .dark\:border-white\/20 {
-  border-color: hsla(0, 0%, 100%, 0.2);
-}
-.dark .dark\:border-white\/10 {
-  border-color: hsla(0, 0%, 100%, 0.1);
-}
-.dark .dark\:border-black\/20 {
-  border-color: rgba(0, 0, 0, 0.2);
-}
-.dark .dark\:bg-gray-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(52, 53, 65, var(--tw-bg-opacity));
-}
-.dark .dark\:bg-\[\#444654\] {
-  --tw-bg-opacity: 1;
-  background-color: rgba(68, 70, 84, var(--tw-bg-opacity));
-}
-.dark .dark\:bg-gray-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(64, 65, 79, var(--tw-bg-opacity));
-}
-.dark .dark\:bg-gray-800\/90 {
-  background-color: rgba(52, 53, 65, 0.9);
-}
-.dark .dark\:bg-gray-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(32, 33, 35, var(--tw-bg-opacity));
-}
-.dark .dark\:bg-transparent {
-  background-color: transparent;
-}
-.dark .dark\:bg-white\/10 {
-  background-color: hsla(0, 0%, 100%, 0.1);
-}
-.dark .dark\:bg-white\/5 {
-  background-color: hsla(0, 0%, 100%, 0.05);
-}
-.dark .dark\:bg-gray-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(142, 142, 160, var(--tw-bg-opacity));
-}
-.dark .dark\:bg-green-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(26, 127, 100, var(--tw-bg-opacity));
-}
-.dark .dark\:text-gray-100 {
-  --tw-text-opacity: 1;
-  color: rgba(236, 236, 241, var(--tw-text-opacity));
-}
-.dark .dark\:text-gray-200 {
-  --tw-text-opacity: 1;
-  color: rgba(217, 217, 227, var(--tw-text-opacity));
-}
-.dark .dark\:text-gray-400 {
-  --tw-text-opacity: 1;
-  color: rgba(172, 172, 190, var(--tw-text-opacity));
-}
-.dark .dark\:text-white {
-  --tw-text-opacity: 1;
-  color: rgba(255, 255, 255, var(--tw-text-opacity));
-}
-.dark .dark\:text-white\/50 {
-  color: hsla(0, 0%, 100%, 0.5);
-}
-.dark .dark\:text-gray-600 {
-  --tw-text-opacity: 1;
-  color: rgba(86, 88, 105, var(--tw-text-opacity));
-}
-.dark .dark\:text-gray-500 {
-  --tw-text-opacity: 1;
-  color: rgba(142, 142, 160, var(--tw-text-opacity));
-}
-.dark .dark\:text-gray-300 {
-  --tw-text-opacity: 1;
-  color: rgba(197, 197, 210, var(--tw-text-opacity));
-}
-.dark .dark\:opacity-100 {
-  opacity: 1;
-}
-.dark .dark\:shadow-\[0_0_15px_rgba\(0\2c 0\2c 0\2c 0\.10\)\] {
-  --tw-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
-  --tw-shadow-colored: 0 0 15px var(--tw-shadow-color);
-  box-shadow: 0 0 transparent, 0 0 transparent, var(--tw-shadow);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 transparent),
-    var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow);
-}
-.dark .dark\:ring-gray-600 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgba(86, 88, 105, var(--tw-ring-opacity));
-}
-.dark .dark\:ring-white\/20 {
-  --tw-ring-color: hsla(0, 0%, 100%, 0.2);
-}
-.dark .dark\:last\:border-0:last-child {
-  border-width: 0;
-}
-.dark .dark\:hover\:bg-black\/10:hover {
-  background-color: rgba(0, 0, 0, 0.1);
-}
-.dark .dark\:hover\:bg-gray-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgba(64, 65, 79, var(--tw-bg-opacity));
-}
-.dark .dark\:hover\:bg-gray-900:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgba(32, 33, 35, var(--tw-bg-opacity));
-}
-.dark .dark\:hover\:bg-gray-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgba(236, 236, 241, var(--tw-bg-opacity));
-}
-.dark .dark\:hover\:bg-gray-500\/10:hover {
-  background-color: hsla(240, 9%, 59%, 0.1);
-}
-.dark .dark\:hover\:text-gray-200:hover {
-  --tw-text-opacity: 1;
-  color: rgba(217, 217, 227, var(--tw-text-opacity));
-}
-.dark .dark\:hover\:text-white:hover {
-  --tw-text-opacity: 1;
-  color: rgba(255, 255, 255, var(--tw-text-opacity));
-}
-.dark .dark\:hover\:text-gray-400:hover {
-  --tw-text-opacity: 1;
-  color: rgba(172, 172, 190, var(--tw-text-opacity));
-}
-.dark .dark\:focus\:border-white:focus {
-  --tw-border-opacity: 1;
-  border-color: rgba(255, 255, 255, var(--tw-border-opacity));
-}
-.dark .dark\:focus\:ring-white:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgba(255, 255, 255, var(--tw-ring-opacity));
-}
-.dark .dark\:disabled\:text-gray-400:disabled {
-  --tw-text-opacity: 1;
-  color: rgba(172, 172, 190, var(--tw-text-opacity));
-}
-.dark .dark\:disabled\:hover\:bg-transparent:hover:disabled {
-  background-color: transparent;
-}
-.dark .disabled\:dark\:hover\:text-gray-400:hover:disabled {
-  --tw-text-opacity: 1;
-  color: rgba(172, 172, 190, var(--tw-text-opacity));
-}

@-webkit-keyframes spin {
  to {
@ -1531,409 +1363,11 @@ html {
 .grow {
 flex-grow:1
 }
-.-translate-y-1\/2 {
- --tw-translate-y:-50%
-}
-.-translate-y-1\/2,
-.translate-y-\[calc\(100\%-71px\)\] {
- -webkit-transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
- transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
-}
-.translate-y-\[calc\(100\%-71px\)\] {
- --tw-translate-y:calc(100% - 71px)
-}
-.-translate-x-full {
- --tw-translate-x:-100%
-}
-.-translate-x-full,
-.translate-y-4 {
- -webkit-transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
- transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
-}
-.translate-y-4 {
- --tw-translate-y:1rem
-}
-.translate-y-0 {
- --tw-translate-y:0px
-}
-.translate-x-0,
-.translate-y-0 {
- -webkit-transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
- transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
-}
-.translate-x-0 {
- --tw-translate-x:0px
-}
-.translate-y-1 {
- --tw-translate-y:0.25rem
-}
-.-translate-x-1\/2,
-.translate-y-1 {
- -webkit-transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
- transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
-}
-.-translate-x-1\/2 {
- --tw-translate-x:-50%
-}
-.translate-x-1 {
- --tw-translate-x:0.25rem
-}
-.-translate-y-full,
-.translate-x-1 {
- -webkit-transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
- transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
-}
-.-translate-y-full {
- --tw-translate-y:-100%
-}
-.translate-x-full {
- --tw-translate-x:100%
-}
-.translate-x-5,
-.translate-x-full {
- -webkit-transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
- transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
-}
-.translate-x-5 {
- --tw-translate-x:1.25rem
-}
-.translate-x-4 {
- --tw-translate-x:1rem
-}
-.translate-x-4,
-.translate-y-1\/4 {
- -webkit-transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
- transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
-}
-.translate-y-1\/4 {
- --tw-translate-y:25%
-}
-.-translate-x-3\/4 {
- --tw-translate-x:-75%
-}
-.-translate-x-3\/4,
-.translate-x-3\/4 {
- -webkit-transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
- transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
-}
-.translate-x-3\/4 {
- --tw-translate-x:75%
-}
-.rotate-180 {
- --tw-rotate:180deg
-}
-.-rotate-180,
-.rotate-180 {
- -webkit-transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
- transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
-}
-.-rotate-180 {
- --tw-rotate:-180deg
-}
+
 .transform {
 -webkit-transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }
-.border-white\/10 {
- border-color:hsla(0,0%,100%,.1)
-}
-.border-white {
- --tw-border-opacity:1;
- border-color:rgba(255,255,255,var(--tw-border-opacity))
-}
-.border-gray-300 {
- --tw-border-opacity:1;
- border-color:rgba(197,197,210,var(--tw-border-opacity))
-}
-.border-black\/10 {
- border-color:rgba(0,0,0,.1)
-}
-.border-white\/20 {
- border-color:hsla(0,0%,100%,.2)
-}
-.border-gray-100 {
- --tw-border-opacity:1;
- border-color:rgba(236,236,241,var(--tw-border-opacity))
-}
-.border-gray-200 {
- --tw-border-opacity:1;
- border-color:rgba(217,217,227,var(--tw-border-opacity))
-}
-.border-black\/20 {
- border-color:rgba(0,0,0,.2)
-}
-.border-gray-500 {
- --tw-border-opacity:1;
- border-color:rgba(142,142,160,var(--tw-border-opacity))
-}
-.bg-gray-200 {
- --tw-bg-opacity:1;
- background-color:rgba(217,217,227,var(--tw-bg-opacity))
-}
-.bg-\[\#5436DA\] {
- --tw-bg-opacity:1;
- background-color:rgba(84,54,218,var(--tw-bg-opacity))
-}
-.bg-white {
- --tw-bg-opacity:1;
- background-color:rgba(255,255,255,var(--tw-bg-opacity))
-}
-.bg-black {
- --tw-bg-opacity:1;
- background-color:rgba(0,0,0,var(--tw-bg-opacity))
-}
-.bg-gray-800 {
- --tw-bg-opacity:1;
- background-color:rgba(52,53,65,var(--tw-bg-opacity))
-}
-.bg-gray-50 {
- --tw-bg-opacity:1;
- background-color:rgba(247,247,248,var(--tw-bg-opacity))
-}
-.bg-gray-500\/90 {
- background-color:hsla(240,9%,59%,.9)
-}
-.bg-gray-900 {
- --tw-bg-opacity:1;
- background-color:rgba(32,33,35,var(--tw-bg-opacity))
-}
-.bg-gray-600 {
- --tw-bg-opacity:1;
- background-color:rgba(86,88,105,var(--tw-bg-opacity))
-}
-.bg-gray-500 {
- --tw-bg-opacity:1;
- background-color:rgba(142,142,160,var(--tw-bg-opacity))
-}
-.\!bg-white {
- --tw-bg-opacity:1!important;
- background-color:rgba(255,255,255,var(--tw-bg-opacity))!important
-}
-.bg-red-200 {
- --tw-bg-opacity:1;
- background-color:rgba(254,202,202,var(--tw-bg-opacity))
-}
-.\!bg-indigo-600 {
- --tw-bg-opacity:1!important;
- background-color:rgba(79,70,229,var(--tw-bg-opacity))!important
-}
-.\!bg-gray-200 {
- --tw-bg-opacity:1!important;
- background-color:rgba(217,217,227,var(--tw-bg-opacity))!important
-}
-.bg-red-500\/10 {
- background-color:rgba(239,68,68,.1)
-}
-.bg-gray-300 {
- --tw-bg-opacity:1;
- background-color:rgba(197,197,210,var(--tw-bg-opacity))
-}
-.bg-gray-400 {
- --tw-bg-opacity:1;
- background-color:rgba(172,172,190,var(--tw-bg-opacity))
-}
-.bg-opacity-75 {
- --tw-bg-opacity:0.75
-}
-.bg-gradient-to-l {
- background-image:linear-gradient(to left,var(--tw-gradient-stops))
-}
-.from-gray-800 {
- --tw-gradient-from:#343541;
- --tw-gradient-to:rgba(52,53,65,0);
- --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)
-}
-.from-gray-900 {
- --tw-gradient-from:#202123;
- --tw-gradient-to:rgba(32,33,35,0);
- --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)
-}
-.text-red-500 {
- --tw-text-opacity:1;
- color:rgba(239,68,68,var(--tw-text-opacity))
-}
-.text-gray-400 {
- --tw-text-opacity:1;
- color:rgba(172,172,190,var(--tw-text-opacity))
-}
-.text-gray-500 {
- --tw-text-opacity:1;
- color:rgba(142,142,160,var(--tw-text-opacity))
-}
-.text-white {
- --tw-text-opacity:1;
- color:rgba(255,255,255,var(--tw-text-opacity))
-}
-.text-yellow-900 {
- --tw-text-opacity:1;
- color:rgba(146,114,1,var(--tw-text-opacity))
-}
-.text-green-700 {
- --tw-text-opacity:1;
- color:rgba(26,127,100,var(--tw-text-opacity))
-}
-.text-gray-800 {
- --tw-text-opacity:1;
- color:rgba(52,53,65,var(--tw-text-opacity))
-}
-.text-gray-700 {
- --tw-text-opacity:1;
- color:rgba(64,65,79,var(--tw-text-opacity))
-}
-.text-gray-200 {
- --tw-text-opacity:1;
- color:rgba(217,217,227,var(--tw-text-opacity))
-}
-.text-gray-100 {
- --tw-text-opacity:1;
- color:rgba(236,236,241,var(--tw-text-opacity))
-}
-.text-gray-300 {
- --tw-text-opacity:1;
- color:rgba(197,197,210,var(--tw-text-opacity))
-}
-.text-gray-900 {
- --tw-text-opacity:1;
- color:rgba(32,33,35,var(--tw-text-opacity))
-}
-.text-gray-600 {
- --tw-text-opacity:1;
- color:rgba(86,88,105,var(--tw-text-opacity))
-}
-.text-red-600 {
- --tw-text-opacity:1;
- color:rgba(220,38,38,var(--tw-text-opacity))
-}
-.text-yellow-700 {
- --tw-text-opacity:1;
- color:rgba(161,98,7,var(--tw-text-opacity))
-}
-.text-indigo-500 {
- --tw-text-opacity:1;
- color:rgba(99,102,241,var(--tw-text-opacity))
-}
-.text-red-800 {
- --tw-text-opacity:1;
- color:rgba(153,27,27,var(--tw-text-opacity))
-}
-.text-black\/50 {
- color:rgba(0,0,0,.5)
-}
-.text-indigo-600 {
- --tw-text-opacity:1;
- color:rgba(79,70,229,var(--tw-text-opacity))
-}
-.text-yellow-400 {
- --tw-text-opacity:1;
- color:rgba(255,198,87,var(--tw-text-opacity))
-}
-.text-red-300 {
- --tw-text-opacity:1;
- color:rgba(252,165,165,var(--tw-text-opacity))
-}
-.text-green-600 {
- --tw-text-opacity:1;
- color:rgba(16,163,127,var(--tw-text-opacity))
-}
-.text-orange-500 {
- --tw-text-opacity:1;
- color:rgba(224,108,43,var(--tw-text-opacity))
-}
-.text-blue-500 {
- --tw-text-opacity:1;
- color:rgba(59,130,246,var(--tw-text-opacity))
-}
-.underline {
- text-decoration-line:underline
-}
-.\!no-underline {
- text-decoration-line:none!important
-}
-.placeholder-gray-500::-webkit-input-placeholder {
- --tw-placeholder-opacity:1;
- color:rgba(142,142,160,var(--tw-placeholder-opacity))
-}
-.placeholder-gray-500::placeholder {
- --tw-placeholder-opacity:1;
- color:rgba(142,142,160,var(--tw-placeholder-opacity))
-}
-
-.transition-transform {
- transition-duration:.15s;
- transition-property:-webkit-transform;
- transition-property:transform;
- transition-property:transform,-webkit-transform;
- transition-timing-function:cubic-bezier(.4,0,.2,1)
-}
-.transition {
- transition-duration:.15s;
- transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,-webkit-transform,-webkit-filter,-webkit-backdrop-filter;
- transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
- transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-transform,-webkit-filter,-webkit-backdrop-filter;
- transition-timing-function:cubic-bezier(.4,0,.2,1)
-}
-.transition-opacity {
- transition-duration:.15s;
- transition-property:opacity;
- transition-timing-function:cubic-bezier(.4,0,.2,1)
-}
-.transition-all {
- transition-duration:.15s;
- transition-property:all;
- transition-timing-function:cubic-bezier(.4,0,.2,1)
-}
-.transition-colors {
- transition-duration:.15s;
- transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;
- transition-timing-function:cubic-bezier(.4,0,.2,1)
-}
-.transition-width {
- transition-duration:.15s;
- transition-property:width;
- transition-timing-function:cubic-bezier(.4,0,.2,1)
-}
-.duration-200 {
- transition-duration:.2s
-}
-.duration-500 {
- transition-duration:.5s
-}
-.duration-75 {
- transition-duration:75ms
-}
-.duration-300 {
- transition-duration:.3s
-}
-.duration-150 {
- transition-duration:.15s
-}
-.duration-100 {
- transition-duration:.1s
-}
-.ease-out {
- transition-timing-function:cubic-bezier(0,0,.2,1)
-}
-.ease-in {
- transition-timing-function:cubic-bezier(.4,0,1,1)
-}
-.ease-linear {
- transition-timing-function:linear
-}
-.ease-in-out {
- transition-timing-function:cubic-bezier(.4,0,.2,1)
-}
-.line-clamp-2 {
- -webkit-line-clamp:2
-}
-.line-clamp-2,
-.line-clamp-3 {
- -webkit-box-orient:vertical;
- display:-webkit-box;
- overflow:hidden
-}
-.line-clamp-3 {
- -webkit-line-clamp:3
-}
 body,
 html {
 height:100%