From 4b21fe04f343bc45a379addc8af16015e01205cc Mon Sep 17 00:00:00 2001 From: sageTheDM Date: Tue, 8 Oct 2024 17:27:30 +0200 Subject: [PATCH 1/3] made the settings responsive via a dropdown menu --- app/components/settings/Settings.tsx | 69 +++++++++++++++++----------- app/styles/Settings.css | 4 ++ app/styles/responsive.css | 26 +++++++---- 3 files changed, 63 insertions(+), 36 deletions(-) diff --git a/app/components/settings/Settings.tsx b/app/components/settings/Settings.tsx index c714a83..295c318 100644 --- a/app/components/settings/Settings.tsx +++ b/app/components/settings/Settings.tsx @@ -730,36 +730,49 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( //#region overall export return (
-
-
-
-
    -
  • setActiveSection('general')}>General
    • -
  • setActiveSection('privacy')}>Privacy
    • -
  • setActiveSection('theme')}>Theme
    • -
  • setActiveSection('foss')}>FOSS
    • -
  • setActiveSection('account')}>Account
    • -
  • setActiveSection('api')}>API Keys
    • -
  • setActiveSection('im/export')}>Import/Export
    • -
-
-
-

Settings for {accountName}

- {renderSettingsContent()} - - -
+
+
+ {/* Sidebar for desktop */} +
+
    +
  • setActiveSection('general')}>General
    • +
  • setActiveSection('privacy')}>Privacy
    • +
  • setActiveSection('theme')}>Theme
    • +
  • setActiveSection('foss')}>FOSS
    • +
  • setActiveSection('account')}>Account
    • +
  • setActiveSection('api')}>API Keys
    • +
  • setActiveSection('im/export')}>Import/Export
    • +
+
+ +
+ {/* Dropdown for selections in responsive mode */} +
+

Select a Setting

+ +
+

Settings for {accountName}

+ {renderSettingsContent()} + + +
+
-
- ); +); }; + export default Settings; \ No newline at end of file diff --git a/app/styles/Settings.css b/app/styles/Settings.css index 981a794..acdc1c6 100644 --- a/app/styles/Settings.css +++ b/app/styles/Settings.css @@ -240,4 +240,8 @@ input[type="radio"] { /* Make the option appear greyed out */ pointer-events: none; /* Prevent clicks */ +} + +.dropdown{ + display: none; } \ No newline at end of file diff --git a/app/styles/responsive.css b/app/styles/responsive.css index 938106e..174bdfc 100644 --- a/app/styles/responsive.css +++ b/app/styles/responsive.css @@ -159,6 +159,24 @@ background-image: url(../../public/img/logo-small.png); width: 4em; } + + .sidebar{ + width: 0%; + display: none; + } + + .settings-main { + width: 80vw; /* Full width for main content */ + margin: auto; + padding: auto; + } + + .dropdown{ + display: flex; + position: relative; + top: 10px; + display: block; + } } /* Responsive adjustments for the settings */ @@ -166,12 +184,4 @@ .settings-content { flex-direction: column; /* Stack sidebar and main content on smaller screens */ } - - .sidebar { - width: 100%; /* Full width for sidebar */ - } - - .settings-main { - width: 100%; /* Full width for main content */ - } } From 9c8bc39b9d64a1091b9326d54094fb0d044a25f1 Mon Sep 17 00:00:00 2001 From: sageTheDM Date: Tue, 8 Oct 2024 17:37:17 +0200 Subject: [PATCH 2/3] css removal unused lines --- app/styles/Login.css | 46 +++++----------- app/styles/Settings.css | 26 --------- app/styles/container.css | 15 ++---- app/styles/credit.css | 95 +++++++++++++++------------------ app/styles/doc.css | 18 +++---- app/styles/faq.css | 20 +++---- app/styles/fonts.css | 41 +++++--------- app/styles/global.css | 56 +++++++------------ app/styles/header.css | 42 ++++++--------- app/styles/history.css | 18 +++---- app/styles/input.css | 35 ++++-------- app/styles/models.css | 19 ------- app/styles/output.css | 24 --------- app/styles/responsive.css | 25 --------- app/styles/scrollbar.css | 3 -- app/styles/user-ai-messages.css | 3 -- app/styles/variables.css | 4 +- 17 files changed, 138 insertions(+), 352 deletions(-) diff --git a/app/styles/Login.css b/app/styles/Login.css index 610ce75..b8fe3f4 100644 --- a/app/styles/Login.css +++ b/app/styles/Login.css @@ -1,6 +1,4 @@ - -/* Overlay for popup - full screen and centered */ -.popup-overlay { +.popup-overlay{ position: fixed; /* Fixed to cover the entire viewport */ top: 0; /* Ensure it starts from the top */ left: 0; @@ -12,9 +10,7 @@ align-items: center; z-index: 10000; /* Higher than the header to cover the screen */ } - -/* Popup content box */ -.popup-content { +.popup-content{ background-color: var(--popup-background-color); /* Use variable for background color */ color: var(--popup-text-color); /* Use variable for text color */ padding: 30px; @@ -24,9 +20,7 @@ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); position: relative; /* For positioning the close button */ } - -/* Input styles */ -.popup-content input { +.popup-content input{ width: 100%; padding: 10px; margin: 10px 0; @@ -35,14 +29,11 @@ font-size: 16px; transition: border-color 0.3s; } - -.popup-content input:focus { +.popup-content input:focus{ border-color: var(--input-button-color); outline: none; /* Remove default outline */ } - -/* Close button styles */ -.close-popup { +.close-popup{ background: var(--close-button-color); /* Use variable for close button color */ color: white; /* Use white for text color */ border: none; @@ -54,13 +45,10 @@ right: 10px; /* Distance from the right */ transition: background 0.3s; } - -.close-popup:hover { +.close-popup:hover{ background: darkred; /* Optional hover effect */ } - -/* Log In button styles */ -.log-into-account { +.log-into-account{ background: green; /* Use variable for login button color */ color: white; border: none; @@ -69,13 +57,10 @@ cursor: pointer; margin-top: 20px; } - -/* Footer section for popups */ -.popup-footer { +.popup-footer{ margin-top: 15px; } - -.popup-footer button { +.popup-footer button{ margin-right: 10px; padding: 8px 15px; background-color: var(--input-button-color); @@ -84,22 +69,17 @@ border-radius: 5px; transition: background-color 0.3s; } - -.popup-footer button:hover { +.popup-footer button:hover{ background-color: var(--input-button-hover-color); } - -.popup-footer a { +.popup-footer a{ color: var(--user-message-color); text-decoration: none; } - -.popup-footer a:hover { +.popup-footer a:hover{ text-decoration: underline; } - -/* Paragraph styles within popup */ -.popup-content p { +.popup-content p{ color: var(--popup-text-color); /* Use variable for paragraph text color */ margin: 10px; } diff --git a/app/styles/Settings.css b/app/styles/Settings.css index acdc1c6..56201f5 100644 --- a/app/styles/Settings.css +++ b/app/styles/Settings.css @@ -10,15 +10,12 @@ justify-content: center; align-items: center; } - .settings-main h2 { margin-bottom: 1em; } - .settings-main p { padding-bottom: 7px; } - /* Main container for the settings */ .settings-container { display: grid; @@ -29,7 +26,6 @@ height: 100%; /* Ensure it takes full height */ } - /* Settings content */ .settings-content { background: var(--history-background-color); @@ -49,7 +45,6 @@ flex-direction: column; /* Flexbox for vertical stacking */ } - /* Sidebar styles */ .sidebar { background: var(--settings-background-color); @@ -66,7 +61,6 @@ height: 100%; /* Ensures sidebar takes full height */ } - /* Sidebar item styles */ .sidebar ul { list-style-type: none; @@ -78,7 +72,6 @@ flex-grow: 1; /* Allows the list to take available space */ } - .sidebar li { margin: 10px 0; cursor: pointer; @@ -86,17 +79,14 @@ border-radius: 5px; transition: background 0.3s; } - .sidebar li:hover { background: var(--input-button-hover-color); /* Highlight on hover */ } - .sidebar li.active { background: var(--button-hover-background-color); /* Active section highlight */ } - /* Main settings area */ .settings-main { grid-column: 2; @@ -110,7 +100,6 @@ flex-direction: column; /* Stack content vertically */ } - /* Close button positioning */ .close-popup { background: var(--close-button-color); @@ -129,7 +118,6 @@ /* Distance from the right */ transition: background 0.3s; } - /* Close button positioning */ .apply { background: var(--apply-button-color); @@ -148,13 +136,10 @@ /* Distance from the right */ transition: background 0.3s; } - .close-popup:hover { background: darkred; /* Optional hover effect */ } - - /* Additional styles for inputs and options */ .settings-option { margin-bottom: 20px; @@ -164,14 +149,12 @@ border-bottom: 1px solid var(--input-border-color); /* Optional, creates a separator between options */ } - .settings-option:last-child { margin-bottom: 0; /* Removes bottom margin from last option */ border-bottom: none; /* Removes separator from last option */ } - .settings-option input[type="text"], .settings-option input[type="email"], .settings-option input[type="password"], @@ -188,33 +171,28 @@ margin-bottom: 10px; /* Adds spacing between inputs */ } - /* Optional additional spacing for labels */ .settings-option label { margin-bottom: 5px; display: block; font-weight: bold; } - .export-button { background-color: var(--button-hover-background-color); padding: 10px; margin: 10px; border-radius: 10px; } - .import-file { background-color: var(--button-hover-background-color); padding: 10px; margin: 10px; } - .slider { display: flex; justify-content: space-between; margin-top: 10px; } - .slider-option { cursor: pointer; padding: 10px; @@ -222,26 +200,22 @@ border-radius: 5px; transition: background-color 0.3s; } - .slider-option.active { background-color: #007bff; /* Change to your active color */ color: white; border-color: #007bff; } - input[type="radio"] { display: none; /* Hide the default radio buttons */ } - .slider-option.disabled { opacity: 0.5; /* Make the option appear greyed out */ pointer-events: none; /* Prevent clicks */ } - .dropdown{ display: none; } \ No newline at end of file diff --git a/app/styles/container.css b/app/styles/container.css index 40c97cc..6ae111b 100644 --- a/app/styles/container.css +++ b/app/styles/container.css @@ -5,8 +5,7 @@ height: 90dvh; padding-top: 1dvh; } - -.left-panel { +.left-panel{ width: 25vw; /* Adjust as needed */ transition: width 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; /* Smooth transitions for all properties */ background-color: var(--left-panel-background-color); /* Use variable for background color */ @@ -14,23 +13,17 @@ margin-left: 0; padding-right: 1em; } - -.left-panel.hidden { +.left-panel.hidden{ opacity: 0; /* Fade out when hidden */ width: 0; /* Collapse width to 0 */ visibility: hidden; /* Hide visibility while collapsing */ - } - -.conversation-container { +.conversation-container{ flex: 1; transition: margin-left 0.3s ease; /* Smooth margin adjustment */ background-color: var(--conversation-background-color); /* Use variable for background color */ border-radius: 1em 0 0 0; } - - - -.conversation-container.collapsed { +.conversation-container.collapsed{ margin-left: 1vw; /* Space for the left panel */ } diff --git a/app/styles/credit.css b/app/styles/credit.css index 1d6b206..486e0cc 100644 --- a/app/styles/credit.css +++ b/app/styles/credit.css @@ -1,52 +1,45 @@ /* Styling for the credits container */ -.credits-container { - padding: 2rem; - } - - .credits-section { - max-width: 900px; - height: 80dvh; - margin: auto; - background: var(--doc-background-color); /* Use variable for background */ - padding: 2rem; - border-radius: 8px; - box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); - overflow-y: scroll; - } - - .title { - font-size: calc(var(--font-size)*2); - color: var(--doc-title-color); /* Use variable for title color */ - margin-bottom: 1.5rem; - } - - .subtitle { - font-size: calc(var(--font-size)*1.5); - color: var(--doc-subtitle-color); /* Use variable for subtitle color */ - margin-top: 2rem; - margin-bottom: 1rem; - } - - .paragraph { - font-size: calc(var(--font-size)); - color: var(--doc-paragraph-color); /* Use variable for paragraph color */ - margin-bottom: 1.5rem; - line-height: 1.6; - } - - /* Styling for the credit buttons */ - .credit-btn { - display: inline-block; - padding: 10px 15px; - margin: 10px 5px; - background-color: var(--button-background-color); /* Button background */ - color: var(--button-text-color); /* Button text */ - text-decoration: none; - border-radius: 5px; - transition: background-color 0.3s ease; - } - - .credit-btn:hover { - background-color: var(--button-hover-background-color); /* Button hover */ - } - \ No newline at end of file +.credits-container{ + padding: 2rem; +} +.credits-section{ + max-width: 900px; + height: 80dvh; + margin: auto; + background: var(--doc-background-color); /* Use variable for background */ + padding: 2rem; + border-radius: 8px; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); + overflow-y: scroll; +} +.title{ + font-size: calc(var(--font-size)*2); + color: var(--doc-title-color); /* Use variable for title color */ + margin-bottom: 1.5rem; +} +.subtitle{ + font-size: calc(var(--font-size)*1.5); + color: var(--doc-subtitle-color); /* Use variable for subtitle color */ + margin-top: 2rem; + margin-bottom: 1rem; +} +.paragraph{ + font-size: calc(var(--font-size)); + color: var(--doc-paragraph-color); /* Use variable for paragraph color */ + margin-bottom: 1.5rem; + line-height: 1.6; +} +/* Styling for the credit buttons */ +.credit-btn{ + display: inline-block; + padding: 10px 15px; + margin: 10px 5px; + background-color: var(--button-background-color); /* Button background */ + color: var(--button-text-color); /* Button text */ + text-decoration: none; + border-radius: 5px; + transition: background-color 0.3s ease; +} +.credit-btn:hover{ + background-color: var(--button-hover-background-color); /* Button hover */ +} diff --git a/app/styles/doc.css b/app/styles/doc.css index 5b2988d..43ce0ed 100644 --- a/app/styles/doc.css +++ b/app/styles/doc.css @@ -1,11 +1,9 @@ /* styles.css */ - /* Styling for the documentation container */ -.documentation-container { +.documentation-container{ padding: 2rem; } - -.documentation-section { +.documentation-section{ max-width: 900px; height: 80dvh; margin: auto; @@ -15,28 +13,24 @@ box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); overflow-y: scroll; } - -.title { +.title{ font-size: calc(var(--font-size)*2); color: var(--doc-title-color); /* Use variable for title color */ margin-bottom: 1.5rem; } - -.subtitle { +.subtitle{ font-size: calc(var(--font-size)*1.5); color: var(--doc-subtitle-color); /* Use variable for subtitle color */ margin-top: 2rem; margin-bottom: 1rem; } - -.subsection-title { +.subsection-title{ font-size: calc(var(--font-size)*1.25); color: var(--doc-subsection-title-color); /* Use variable for subsection title color */ margin-top: 1.5rem; margin-bottom: 0.75rem; } - -.paragraph { +.paragraph{ font-size: calc(var(--font-size)); color: var(--doc-paragraph-color); /* Use variable for paragraph color */ margin-bottom: 1.5rem; diff --git a/app/styles/faq.css b/app/styles/faq.css index 1484722..416b2ab 100644 --- a/app/styles/faq.css +++ b/app/styles/faq.css @@ -1,13 +1,12 @@ /* Make sure the parent container of #faq takes up the full viewport height */ -.faq-container { +.faq-container{ display: flex; justify-content: center; /* Center horizontally */ align-items: center; /* Center vertically */ height: 100vh; /* Full viewport height */ padding: 0 10px; /* Optional padding to ensure spacing on small screens */ } - -#faq { +#faq{ max-width: 800px; width: 90%; padding: 20px; @@ -18,34 +17,29 @@ margin: 2rem auto; height: 80vh; } - -#faq h2 { +#faq h2{ text-align: center; color: var(--faq-heading-color); /* Use variable for heading color */ font-size: 2em; margin-bottom: 20px; } - -.faq-item { +.faq-item{ margin-bottom: 20px; padding: 10px; border-radius: 5px; background-color: var(--faq-item-background-color); /* Use variable for item background */ transition: background-color 0.3s ease-in-out; } - -.faq-item h3 { +.faq-item h3{ color: var(--faq-item-heading-color); /* Use variable for item heading color */ margin-bottom: 10px; font-size: 1.5em; } - -.faq-item p { +.faq-item p{ color: var(--faq-item-text-color); /* Use variable for item text color */ font-size: 1.1em; line-height: 1.5; } - -.faq-item:hover { +.faq-item:hover{ background-color: var(--faq-item-hover-background-color); /* Use variable for hover background */ } diff --git a/app/styles/fonts.css b/app/styles/fonts.css index 33ef933..555df7f 100644 --- a/app/styles/fonts.css +++ b/app/styles/fonts.css @@ -1,69 +1,56 @@ -@font-face { +@font-face{ font-family: 'Inconsolata'; src: url('/fonts/serious/Inconsolata/Inconsolata-VariableFont_wdth,wght.ttf') format('truetype'); } - -@font-face { +@font-face{ font-family: 'Merriweather'; src: url('/fonts/serious/Merriweather/Merriweather-Regular.tff') format('truetype'); } - -@font-face { +@font-face{ font-family: 'Noto Sans'; src: url('/fonts/serious/Noto_Sans/NotoSans-VariableFont_wdth\,wght.ttf') format('truetype'); } - -@font-face { +@font-face{ font-family: 'Noto Serif'; src: url('/fonts/serious/Noto_Serif/NotoSerif-VariableFont_wdth\,wght.ttf') format('truetype'); } - -@font-face { +@font-face{ font-family: 'Playfair Display'; src: url('/fonts/serious/Playfair_Display/PlayfairDisplay-VariableFont_wght.ttf') format('truetype'); } - -@font-face { +@font-face{ font-family: 'Poppins'; src: url('/fonts/serious/Poppins/Poppins-Regular.ttf') format('truetype'); } - -@font-face { +@font-face{ font-family: 'Roboto'; src: url('/fonts/serious/Roboto/Roboto-Regular.ttf') format('truetype'); } - -@font-face { +@font-face{ font-family: 'Ubuntu'; src: url('/fonts/serious/Ubuntu/Ubuntu-Regular.ttf') format('truetype'); } - -@font-face { +@font-face{ font-family: 'Bangers'; src: url('/fonts/comic-sans-but-better/Bangers/Bangers-Regular.ttf') format('truetype'); } - -@font-face { +@font-face{ font-family: 'Caveat'; src: url('/fonts/comic-sans-but-better/Caveat/Caveat-VariableFont_wght.ttf') format('truetype'); } - -@font-face { +@font-face{ font-family: 'Frederika the Great'; src: url('/fonts/comic-sans-but-better/Fredericka_the_Great/FrederickatheGreat-Regular.ttf') format('truetype'); } - -@font-face { +@font-face{ font-family: 'Rock Salt'; src: url('/fonts/RockSalt.ttf') format('truetype'); } - -@font-face { +@font-face{ font-family: 'Sofadi One'; src: url('/fonts/comic-sans-but-better/Sofadi_One/SofadiOne-Regular.ttf') format('truetype'); } - -@font-face { +@font-face{ font-family: 'Zilla Slab Highlight'; src: url('/fonts/comic-sans-but-better/Zilla_Slab_Highlight/ZillaSlabHighlight-Regular.ttf') format('truetype'); } diff --git a/app/styles/global.css b/app/styles/global.css index 94ed660..3e0047e 100644 --- a/app/styles/global.css +++ b/app/styles/global.css @@ -1,79 +1,59 @@ -body { +body{ height: 100dvh; overflow: hidden; position: relative; } - /* Chrome, Edge, and Safari */ -::-webkit-scrollbar { - width: 12px; - /* Adjust width for horizontal and vertical scrollbars */ +::-webkit-scrollbar{ + width: 12px; /* Adjust width for horizontal and vertical scrollbars */ } - -::-webkit-scrollbar-track { - background: #f0f0f0; - /* Background of the scrollbar track */ +::-webkit-scrollbar-track{ + background: #f0f0f0; /* Background of the scrollbar track */ } - -::-webkit-scrollbar-thumb { - background-color: #888; - /* Color of the draggable part (thumb) */ - border-radius: 10px; - /* Rounded corners */ - border: 2px solid #f0f0f0; - /* Space around the thumb */ +::-webkit-scrollbar-thumb{ + background-color: #888; /* Color of the draggable part (thumb) */ + border-radius: 10px; /* Rounded corners */ + border: 2px solid #f0f0f0; /* Space around the thumb */ } - -::-webkit-scrollbar-thumb:hover { - background-color: #555; - /* Thumb color on hover */ +::-webkit-scrollbar-thumb:hover{ + background-color: #555; /* Thumb color on hover */ } - -body { +body{ background-color: var(--background-color); color: var(--text-color); font-family: var(--font-family); font-size: var(--font-size); } - - -header { +header{ background-color: var(--header-background-color); color: var(--header-text-color); } - -button { +button{ background-color: var(--button-background-color); color: var(--text-color); border: 1px solid var(--input-border-color); transition: background-color 0.3s ease; } - -button:hover { +button:hover{ background-color: var(--button-hover-background-color); } - -input { +input{ background-color: var(--input-background-color); border: 1px solid var(--input-border-color); color: var(--text-color); } - -input:hover { +input:hover{ border-color: var(--button-hover-background-color); } - select{ background-color: var(--input-background-color); } - h1, h2, h3, h4, p{ color: var(--text-color); font-family: var(--font-family); font-weight: 500; } - p{ font-weight: 400; - font-size: var(--font-size) + font-size: var(--font-size); } diff --git a/app/styles/header.css b/app/styles/header.css index 29431c5..ac5b79f 100644 --- a/app/styles/header.css +++ b/app/styles/header.css @@ -1,4 +1,4 @@ -header { +header{ position: relative; padding: 0 20px; width: 100%; @@ -9,36 +9,32 @@ header { font-size: 1em; z-index: 999; } - /* Hamburger button styles */ -.hamburger { +.hamburger{ position: absolute; left: 5vw; display: flex; /* Always show hamburger button */ flex-direction: column; cursor: pointer; } - -.hamburger span { +.hamburger span{ width: 25px; height: 3px; background-color: white; margin: 4px; transition: 0.3s; } - -.hamburger.open span:nth-child(1) { +.hamburger.open span:nth-child(1){ transform: rotate(45deg) translate(5px, 10px); } -.hamburger.open span:nth-child(2) { +.hamburger.open span:nth-child(2){ opacity: 0; } -.hamburger.open span:nth-child(3) { +.hamburger.open span:nth-child(3){ transform: rotate(-45deg) translate(5px, -10px); } - /* Navigation links (hidden in header, shown in dropdown) */ -.nav-links { +.nav-links{ display: none; /* Default hidden */ position: absolute; top: 10vh; /* Adjust as needed */ @@ -51,13 +47,11 @@ header { padding: 10px auto; margin: auto; } - -.nav-links.active { +.nav-links.active{ display: flex; /* Show when active */ height: fit-content; } - -.nav-btn { +.nav-btn{ background-color: var(--input-button-color); border: none; font-size: 0.9em; @@ -69,13 +63,11 @@ header { text-align: center; /* Center text */ margin: 4px auto; } - -.nav-btn:hover { +.nav-btn:hover{ background-color: var(--input-button-hover-color); } - /* Logo styles */ -.header-logo { +.header-logo{ width: 250px; height: 5vh; background-image: url(../../public/img/logo.png); @@ -85,9 +77,8 @@ header { background-color: transparent; border: none; } - /* Login button styles */ -.login-button-container { +.login-button-container{ position: absolute; top: 0.1vh; right: 1vw; @@ -95,8 +86,7 @@ header { display: flex; align-items: center; } - -.header-login-button { +.header-login-button{ height: 100%; width: max-content; font-size: var(--font-size); @@ -112,11 +102,9 @@ header { justify-content: center; align-items: center; } - -.header-login-button:hover { +.header-login-button:hover{ background-color: var(--input-button-hover-color); } - .show-hide-btn{ display: flex; align-items: center; @@ -126,4 +114,4 @@ header { left: 10vw; cursor: pointer; padding: 10px; -} \ No newline at end of file +} diff --git a/app/styles/history.css b/app/styles/history.css index 14c8428..bf92b8e 100644 --- a/app/styles/history.css +++ b/app/styles/history.css @@ -1,4 +1,4 @@ -.history-background { +.history-background{ grid-column: 1/2; grid-row: 1/2; height: 35dvh; @@ -9,35 +9,29 @@ margin-right: 0; border-radius: 1em; } - -.history { +.history{ height: 100%; overflow-y: scroll; padding-right: 10px; } - -.history ul { +.history ul{ list-style: none; } - -.history ul li { +.history ul li{ padding: 10px 0; border-bottom: 1px solid var(--text-color); width: 100%; } - -.history ul li a { +.history ul li a{ display: block; text-decoration: none; color: var(--text-color); /* Use variable for link text color */ width: 100%; padding: 5px; } - -.history ul li a:hover { +.history ul li a:hover{ background-color: var(--input-button-hover-color); } - .history-models{ position: relative; height: 86dvh; diff --git a/app/styles/input.css b/app/styles/input.css index 7e7456b..0e550ec 100644 --- a/app/styles/input.css +++ b/app/styles/input.css @@ -1,15 +1,11 @@ -/* Input Section */ -.input { +.input{ border-radius: 8px; background-color: var(--input-background-color); - padding: 1em; - padding-left: 0.5em; - padding-right: 0; + padding: 1em 0 1em 0.5em; margin: 0 10px; display: flex; justify-content: space-between; align-items: center; - height: auto; height: 10dvh; position: absolute; left: 0.25vw; @@ -18,8 +14,7 @@ box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.5); z-index: 600; } - -.input input { +.input input{ flex-grow: 1; padding: 5px; font-size: 1em; @@ -32,20 +27,16 @@ transition: border-color 0.3s ease-in-out; height: 7vh; } - -.textInputField::placeholder { +.textInputField::placeholder{ color: var(--text-color); /* Change to desired placeholder color */ opacity: 1; /* Ensures full opacity (optional) */ } - -.input input:focus { +.input input:focus{ border-color: var(--input-button-hover-color); } - -.input button { +.input button{ padding: 5px; - margin: 5px; - margin-left: 0; + margin: 5px 5px 5px 0; background-color: var(--input-button-color); color: var(--user-message-text-color); /* Use variable for button text color */ border: none; @@ -61,28 +52,22 @@ position: relative; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } - -.input button img { +.input button img{ height: 20px; } - -.input button:hover { +.input button:hover{ background-color: var(--input-button-hover-color); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); } - .microphone-button.red{ background-color: var(--close-button-color); } - .microphone-button.green{ background-color: var(--button-background-color); } - .microphone-button.red:hover{ background-color: var(--close-button-hover-color); } - .microphone-button.green:hover{ background-color: var(--input-button-hover-color); -} \ No newline at end of file +} diff --git a/app/styles/models.css b/app/styles/models.css index fd7e22b..e657d6c 100644 --- a/app/styles/models.css +++ b/app/styles/models.css @@ -13,7 +13,6 @@ border-radius: 1em; height: 45dvh; } - .models { display: flex; flex-direction: column; @@ -21,7 +20,6 @@ overflow: hidden; overflow-y: scroll; } - .models .title { display: flex; justify-content: center; @@ -29,24 +27,20 @@ font-size: 1.5em; margin-bottom: 0; } - .model-dropdown { display: flex; justify-content: center; margin-bottom: 1em; /* Space between dropdown and models */ } - .model-dropdown label { margin-right: 0.5em; /* Space between label and dropdown */ } - .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5vh; width: 100%; /* Ensure grid takes full width */ } - .model-box { display: flex; align-items: center; @@ -59,12 +53,10 @@ width: 18vh; margin: auto; /* Center each model box in the grid cell */ } - .model-box.selected { box-shadow: 0 0 25px 5px var(--apply-button-hover-color); /* Glowing border */ border-color: var(--apply-button-hover-color); } - .overlay { position: absolute; left: 0; @@ -81,7 +73,6 @@ opacity: 0; border-radius: 5%; } - .overlay img { align-self: flex-end; justify-self: end; @@ -91,18 +82,15 @@ right: 15px; bottom: 15px; } - .model-box:hover .overlay { opacity: 1; } - /* Model background styles */ .code-model { background-image: url(/img/code.jpg); background-repeat: no-repeat; background-size: cover; } - .math-model { background-image: url(/img/math.jpg); background-color: var(--background-color); @@ -110,7 +98,6 @@ background-repeat: no-repeat; background-size: contain; } - .language-model { background-image: url(/img/language.jpg); background-color: #72cce4; @@ -118,8 +105,6 @@ background-size: contain; background-position: center; } - - .weather-model { background-image: url(/img/weather.jpg); background-color: #72cce4; @@ -127,7 +112,6 @@ background-size: contain; background-position: center; } - .custom1-model, .custom2-model { background-image: url(/img/default.jpg); @@ -135,20 +119,17 @@ background-size: cover; background-position: center; } - .model-dropdown { display: flex; flex-direction: column; /* Stack label and dropdown */ align-items: center; /* Center the content */ margin-bottom: 1em; /* Space between dropdown and models */ } - .model-dropdown label { margin-bottom: 0.5em; /* Space between label and dropdown */ font-size: large; /* Increase font size for visibility */ color: var(--text-color); /* Use variable for text color */ } - #model-select { padding: 0.5em; /* Padding for better touch targets */ border-radius: 5px; /* Rounded corners */ diff --git a/app/styles/output.css b/app/styles/output.css index 7cc0166..8261793 100644 --- a/app/styles/output.css +++ b/app/styles/output.css @@ -16,7 +16,6 @@ height: 85dvh; position: relative; } - #conversation { display: flex; flex-direction: column; @@ -27,7 +26,6 @@ border-radius: 10px; scroll-behavior: smooth; } - /* Message Bubbles */ .user-message, .ai-message { padding: 10px; @@ -37,23 +35,19 @@ word-wrap: break-word; overflow-wrap: break-word; } - .user-message { background-color: var(--user-message-background-color); align-self: flex-end; color: var(--user-message-text-color); } - .ai-message { background-color: var(--ai-message-background-color); align-self: flex-start; color: var(--ai-message-text-color); } - .ai-message a { color: var(--text-color); } - .ai-message table { display: block; /* Treat the table as a block element */ position: relative; @@ -67,31 +61,24 @@ border-radius: 4px; /* Optional: Add border radius similar to pre/code */ margin-top: 5px; } - - .ai-message th { background-color: var(--user-message-background-color); align-items: center; padding: 5px; } - .ai-message td { align-items: center; padding: 5px; } - .ai-message img { max-width: 80%; } - .ai-message a:hover { filter: brightness(70%); } - .ai-message li { margin-left: 1em; } - .ai-message code, .ai-message pre { overflow-x: auto; white-space: pre; @@ -101,12 +88,10 @@ background-color: var(--code-background-color); border-radius: 4px; } - /* Button Container */ .button-container { display: flex; } - .button-container button { background: none; border: none; @@ -117,18 +102,15 @@ height: 40px; width: 40px; } - .button-container button:hover { background-color: var(--button-hover-background-color); } - .tooltip { position: relative; display: inline-block; cursor: pointer; z-index: 900; } - .tooltip .tooltiptext { visibility: hidden; background-color: var(--user-message-background-color); @@ -137,17 +119,14 @@ padding: 5px; border-radius: 4px; font-size: calc(var(--font-size) * 0.8); - position: absolute; top: 100%; left: 50%; transform: translateX(-50%); white-space: nowrap; - opacity: 0; transition: all 0.3s; } - .tooltip .tooltiptext::after { content: ""; position: absolute; @@ -158,19 +137,16 @@ border-style: solid; border-color: transparent transparent var(--user-message-background-color) transparent; } - .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } - #copiedText { margin-top: 1em; cursor: default; pointer-events: none; user-select: none; } - #scrollToBottom { scroll-behavior: smooth; visibility: hidden; diff --git a/app/styles/responsive.css b/app/styles/responsive.css index 174bdfc..89c550c 100644 --- a/app/styles/responsive.css +++ b/app/styles/responsive.css @@ -5,7 +5,6 @@ padding: 0; border-radius: none; } - /* Header styles */ header { top: 0; @@ -14,7 +13,6 @@ padding-top: 0; width: 100%; } - /* Container styles */ .container { display: flex; @@ -24,26 +22,22 @@ margin: 0; padding: 1dvh 0 0 0; } - /* Left panel styles */ .left-panel { display: hidden; /* Initially hidden */ min-width: 100%; /* Takes full width when visible */ margin: 0; } - .left-panel.visible { display: block; height: min-content; } - /* Conversation container styles */ .conversation-container { min-width: 100%; height: 100%; border-radius: 0; } - .conversation-container.collapsed { width: 0; padding: 0; @@ -51,25 +45,21 @@ overflow: hidden; display: hidden; } - .conversation-container.expanded { min-width: 100%; margin-left: 0; border-radius: none; height: 10vh; } - /* Grid styles */ .grid { grid-template-columns: 1fr; /* One item per line */ } - /* Model box styles */ .model-box { max-width: none; /* Remove max-width */ margin: 0 auto; /* Center each model-box */ } - /* Input styles */ .input { grid-column: 1 / -1; @@ -82,7 +72,6 @@ left: 2vw; justify-content: flex-start; } - .input input { font-size: 1em; /* Adjust font size */ max-width: 70%; @@ -90,7 +79,6 @@ border-color: var(--input-border-color); /* Use variable for input border */ color: var(--text-color); /* Use variable for text color */ } - .input button { height: 100%; /* Adjust button height */ width: 15%; /* Adjust button width */ @@ -99,16 +87,13 @@ color: var(--user-message-text-color); /* Use variable for button text color */ margin: 0; } - .header-logo { position: relative; } - .hamburger.open { margin-top: 0.5vh; padding-left: 1vw; } - .nav-links { display: none; /* Hidden by default */ position: absolute; @@ -121,12 +106,10 @@ padding: 10px; height: fit-content; } - .nav-links.active { display: flex; /* Show when active */ height: fit-content; } - .nav-btn { width: 100%; text-align: center; @@ -137,40 +120,32 @@ font-size: 0.9em; border-radius: 5px; } - .nav-btn:hover { background-color: var(--input-button-hover-color); } - .hamburger { display: flex; /* Always show hamburger button */ } - .header-login-button { right: 5vh; /* Keep login button visible */ } - .show-hide-btn{ width: fit-content; left: 20vw; } - .header-logo { background-image: url(../../public/img/logo-small.png); width: 4em; } - .sidebar{ width: 0%; display: none; } - .settings-main { width: 80vw; /* Full width for main content */ margin: auto; padding: auto; } - .dropdown{ display: flex; position: relative; diff --git a/app/styles/scrollbar.css b/app/styles/scrollbar.css index 7608126..0fdf38d 100644 --- a/app/styles/scrollbar.css +++ b/app/styles/scrollbar.css @@ -2,16 +2,13 @@ .scrollbar { overflow-y: scroll; } - .scrollbar::-webkit-scrollbar { width: 8px; } - .scrollbar::-webkit-scrollbar-thumb { background-color: var(--input-border-color); /* Use variable for thumb color */ border-radius: 4px; } - .scrollbar::-webkit-scrollbar-track { background-color: var(--history-background-color); /* Use variable for track color */ } diff --git a/app/styles/user-ai-messages.css b/app/styles/user-ai-messages.css index 3dd4461..688bddc 100644 --- a/app/styles/user-ai-messages.css +++ b/app/styles/user-ai-messages.css @@ -9,7 +9,6 @@ display: block; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); } - .user-message { background-color: var(--user-message-background-color); color: var(--text-color); @@ -18,7 +17,6 @@ text-align: left; margin-right: 1.5vw; } - .ai-message { background-color: var(--ai-message-background-color); color: var(--text-color); @@ -26,7 +24,6 @@ margin-right: auto; text-align: left; } - .ai-container{ position: relative; height: min-content; diff --git a/app/styles/variables.css b/app/styles/variables.css index dab7cbe..d68f8b8 100644 --- a/app/styles/variables.css +++ b/app/styles/variables.css @@ -23,8 +23,7 @@ --apply-button-color:#8B9635; --apply-button-hover-color:#6b7c2b; --burger-menu-background-color: #79832e; /*NEW*/ - --overlay-text-color:white; /*NEW*/ - + --overlay-text-color:white; /*NEW*/ /* FAQ Colors */ --faq-background-color: #474D22; /* Background color for FAQ section */ --faq-heading-color: #8B9635; /* Heading color for FAQ section */ @@ -32,7 +31,6 @@ --faq-item-heading-color: #474D22; /* Heading color for FAQ items */ --faq-item-text-color: #333; /* Text color for FAQ items */ --faq-item-hover-background-color: #e0e0e0; /* Hover background color for FAQ items */ - --popup-background-color: #8B9635; --pop-up-text: #000; /* Text color for pop-ups */ --input-border-color: #8B9635; /* Input border color */ From e0e711f1a9559fd5078f219639015c0466739f9d Mon Sep 17 00:00:00 2001 From: sageTheDM Date: Wed, 9 Oct 2024 08:11:40 +0200 Subject: [PATCH 3/3] Database first tries --- app/components/Credits.tsx | 76 +++++++--------------------- app/components/Header.tsx | 18 ++++--- app/components/InputFrontend.tsx | 36 ++++++++----- app/components/Models.tsx | 60 +++++++++------------- app/components/settings/Settings.tsx | 22 ++++++-- app/styles/responsive.css | 5 ++ 6 files changed, 100 insertions(+), 117 deletions(-) diff --git a/app/components/Credits.tsx b/app/components/Credits.tsx index 5144603..5c94887 100644 --- a/app/components/Credits.tsx +++ b/app/components/Credits.tsx @@ -1,62 +1,24 @@ import React from 'react'; -const Credits: React.FC = () => { - return ( -
-
-

Credits

+const Credits: React.FC = () => ( +
+
+

Credits

+

Icons

+

This project utilizes the following icon resources:

+ +

Fonts

+

The fonts used in this project are provided by:

+ + + + +
+
+); -

Icons

-

- This project utilizes the following icon resources: -

- - fontawesome - -

Fonts

-

- The fonts used in this project are provided by: -

- - Poppins - - - Inconsolata, Merriweather, Noto Sans, Noto Serif, Playfair Display, Bangers, Caveat, Frederika the Great, Sofadi One, Zilla Slab Highlight - - - Roboto, Rock Salt - - - Ubuntu - -
-
- ); -}; +const CreditLink = ({ href, label }: { href: string; label: string }) => ( + {label} +); export default Credits; diff --git a/app/components/Header.tsx b/app/components/Header.tsx index 63d0b87..e477a80 100644 --- a/app/components/Header.tsx +++ b/app/components/Header.tsx @@ -20,13 +20,16 @@ const Header: React.FC = ({ const dropdownRef = useRef(null); const toggleRef = useRef(null); + // Pages that will be displayed in the menu + const pages: ('AI' | 'FAQ' | 'Documentation' | 'Credits')[] = ['AI', 'FAQ', 'Documentation', 'Credits']; + // Toggle menu state const toggleMenu = () => { setMenuOpen((prevMenuOpen) => !prevMenuOpen); }; // Handle button click - const buttonClicked = (page: "AI" | "Documentation" | "FAQ" | "Credits") => { + const handleViewChange = (page: 'AI' | 'FAQ' | 'Documentation' | 'Credits') => { onViewChange(page); setMenuOpen(false); // Close the menu when a button is clicked }; @@ -35,9 +38,9 @@ const Header: React.FC = ({ useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if ( - dropdownRef.current && + dropdownRef.current && !dropdownRef.current.contains(event.target as Node) && - toggleRef.current && + toggleRef.current && !toggleRef.current.contains(event.target as Node) ) { setMenuOpen(false); @@ -72,10 +75,11 @@ const Header: React.FC = ({ )}
diff --git a/app/components/InputFrontend.tsx b/app/components/InputFrontend.tsx index fec7713..3c8295c 100644 --- a/app/components/InputFrontend.tsx +++ b/app/components/InputFrontend.tsx @@ -1,5 +1,5 @@ import React, { useState, ForwardedRef, useEffect } from 'react'; -import "../styles/variables.css" +import "../styles/variables.css"; interface InputProps { message: string; @@ -13,33 +13,36 @@ const InputFrontend = React.forwardRef( ({ message, onSendClick, onMicClick, inputDisabled, isRecording }, ref: ForwardedRef) => { const [inputValue, setInputValue] = useState(''); + // Sync the inputValue state with the message prop useEffect(() => { setInputValue(message); }, [message]); + // Handle the input change const handleInputChange = (e: React.ChangeEvent) => { setInputValue(e.target.value); }; + // Handle 'Enter' key press const handleKeyDown = (event: React.KeyboardEvent) => { - if (!inputDisabled) { - if (event.key === 'Enter') { - onSendClick(inputValue, false); // Call the function passed via props - setInputValue(''); // Optionally clear input after submission - event.preventDefault(); // Prevent default action (e.g., form submission) - } + if (!inputDisabled && event.key === 'Enter') { + onSendClick(inputValue, false); // Send the message on Enter + setInputValue(''); // Clear the input after submission + event.preventDefault(); // Prevent the default Enter action } }; + // Handle the Send button click const handleSendClick = () => { if (inputValue.trim() !== "") { - onSendClick(inputValue, false); // Send message to parent component + onSendClick(inputValue, false); // Send message setInputValue(''); // Clear input after sending } }; return (
+ {/* Input field for typing messages */} ( value={inputValue} onChange={handleInputChange} onKeyDown={handleKeyDown} - className='textInputField' + className="textInputField" + disabled={inputDisabled} // Disable when inputDisabled is true /> - + + {/* Microphone button */}
); diff --git a/app/components/Models.tsx b/app/components/Models.tsx index 30c427c..469d9cb 100644 --- a/app/components/Models.tsx +++ b/app/components/Models.tsx @@ -123,50 +123,39 @@ const ModelSection: React.FC = () => { useEffect(() => { if (typeof localStorage !== 'undefined') { - - setIsOpenSourceMode(localStorage.getItem("openSourceMode")) - const temp = localStorage.getItem("activeSelectedAIFunction") || "" - setActiveSelectedAIFunction(temp) - if (!localStorage.getItem('selectedModelDropdown')) { - localStorage.setItem("selectedModelDropdown", "Offline Fast") - } - - if (!localStorage.getItem("activeSelectedAIFunction")) { - setActiveSelectedAIFunction('Code') - localStorage.setItem('activeSelectedAIFunction', 'Code') - } - - if (!localStorage.getItem("model")) { - localStorage.setItem("model", 'starcoder2') - } - - if (!localStorage.getItem("radioSelection")) { - localStorage.setItem("radioSelection", 'None') - } - - if (!localStorage.getItem("type")) { - localStorage.setItem("type", 'local') - } - + const defaultValues = { + selectedModelDropdown: 'Offline Fast', + activeSelectedAIFunction: 'Code', + model: 'starcoder2', + radioSelection: 'None', + type: 'local', + }; + + Object.entries(defaultValues).forEach(([key, value]) => { + if (!localStorage.getItem(key)) { + localStorage.setItem(key, value); + } + }); + + setIsOpenSourceMode(localStorage.getItem("openSourceMode")); + setActiveSelectedAIFunction(localStorage.getItem("activeSelectedAIFunction") || ''); + setRadioSelection(localStorage.getItem("radioSelection") || ''); + setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || ''); + const handleStorageChange = () => { setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || ''); }; - + // Update immediately when localStorage changes - if (typeof window !== 'undefined') { - window.addEventListener('storage', handleStorageChange); - } + window.addEventListener('storage', handleStorageChange); - setRadioSelection(localStorage.getItem('radioSelection') || ''); - setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || ''); // Cleanup listener on component unmount return () => { - if (typeof window !== 'undefined') { - window.removeEventListener('storage', handleStorageChange); - } + window.removeEventListener('storage', handleStorageChange); }; } - }, []); // Dependency array can remain empty if you only want this to run on mount + }, []); + useEffect(() => { if (typeof localStorage !== 'undefined') { @@ -271,7 +260,6 @@ const ModelSection: React.FC = () => { ))}
- {/* Model Grid with Cards */}
{selectedAIFunction.map( diff --git a/app/components/settings/Settings.tsx b/app/components/settings/Settings.tsx index 295c318..d1adb30 100644 --- a/app/components/settings/Settings.tsx +++ b/app/components/settings/Settings.tsx @@ -15,6 +15,7 @@ import { changeSettings, createAccount, deleteAccount, + getSettings } from '../../backend/database'; import ThemeDropdown from './DropDownTheme'; @@ -298,6 +299,11 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( }; useEffect(() => { + let useName = localStorage.getItem("accountName") + let usePassword = localStorage.getItem("accountPassword") + if (useName && usePassword) { + importDatabase(useName, usePassword) + } const savedTheme = localStorage.getItem('selectedTheme'); if (savedTheme) { setSelectedTheme(savedTheme); @@ -305,6 +311,10 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( } }, []); // Runs only once when the component mounts + const importDatabase = async (useName : string, usePassword : string) => { + const databaseSettings = await getSettings(useName, usePassword) + importSettings(databaseSettings) + } // Effect hooks to update localStorage whenever any state changes useEffect(() => { // Flatten nested objects @@ -355,7 +365,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( } if (await createAccount(useName, useEmail, usePassword)) { - if (await changeSettings(useName, usePassword, settings)) { + if (await changeSettings(useName, usePassword, handleExport)) { localStorage.setItem("currentName", useName) localStorage.setItem("currentPassword", usePassword) localStorage.setItem("currentEmail", useEmail) @@ -714,7 +724,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( const handleExport = () => { const settingsData = exportSettings(); - // Create a blob and download the exported settings const blob = new Blob([settingsData], { type: 'application/json' }); const url = URL.createObjectURL(blob); @@ -748,7 +757,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
{/* Dropdown for selections in responsive mode */}
-

Select a Setting

+

Select a Setting