@buerokratt-ria/common-gui-components 0.0.50 → 0.0.51

package/CHANGELOG.md

@@ -4,6 +4,10 @@ All changes to this project will be documented in this file.
 
 ## Template [MajorVersion.MediterraneanVersion.MinorVersion] - DD-MM-YYYY
 
+## [0.0.51] - 05.05.2026
+
+- History page header alignment
+
 ## [0.0.50] - 04.05.2026
 
 - Added authenticated person column

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buerokratt-ria/common-gui-components",
-  "version": "0.0.50",
+  "version": "0.0.51",
   "description": "Common GUI components and pre defined templates.",
   "main": "index.ts",
   "author": "ExiRai",

package/templates/history-page/src/History.scss

@@ -7,6 +7,12 @@
   width: 40%;
 }
 
+.header-container {
+    align-items: center;
+    display: flex;
+    gap: 24px;
+}
+
 .card-drawer-container {
   display: flex;
   width: 100%;
@@ -79,3 +85,7 @@
   overflow-y: auto;
   padding: get-spacing(haapsalu);
 }
+
+.spinner {
+  height: 24px;
+}

package/templates/history-page/src/index.tsx

@@ -1038,18 +1038,26 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
 
     return (
         <>
-            {displayTitle && (
-                <h1>{t('chat.history.title')}{totalCount === null ? '' : ` (${totalCount.toLocaleString('et-EE')})`}</h1>
-            )}
+            <div className="header-container">
+                {displayTitle && (
+                    <h1>{t('chat.history.title')}{totalCount === null ? '' : ` (${totalCount.toLocaleString('et-EE')})`}</h1>
+                )}
 
-            {showDownload && (
-                <div>
-                    <Button appearance={"primary"} onClick={downloadChatHistory}>
-                        {loading && <CgSpinner className="spinner"/>}
-                        {!loading && t('files.download_xlsx')}
-                    </Button>
-                </div>
-            )}
+                {showDownload && (
+                    <div>
+                        <Button
+                            type="button"
+                            appearance={"secondary"}
+                            size="s"
+                            style={{ marginTop: '4px' }}
+                            onClick={downloadChatHistory}
+                        >
+                            {loading && <CgSpinner className="spinner" />}
+                            {!loading && t('files.download_xlsx')}
+                        </Button>
+                    </div>
+                )}
+            </div>
 
             <Card>
                 <Track gap={16}>

package/ui-components/Button/Button.scss

@@ -50,15 +50,17 @@
 
   &--secondary {
     background-color: get-color(white);
-    box-shadow: inset 0 0 0 2px get-color(black-coral-10);
-    color: get-color(black-coral-15);
+    box-shadow: inset 0 0 0 2px get-color(sapphire-blue-10);
+    color: get-color(sapphire-blue-10);
 
     &:hover,
     &:active {
-      box-shadow: inset 0 0 0 2px get-color(black-coral-2);
+      background-color: get-color(sapphire-blue-0);
+      box-shadow: inset 0 0 0 2px get-color(sapphire-blue-10);
     }
 
     &:focus {
+      background-color: get-color(sapphire-blue-0);
       box-shadow: inset 0 0 0 2px get-color(sapphire-blue-10);
     }
 
@@ -145,6 +147,8 @@
   }
 
   &--s {
-    padding: 4.5px 24px;
+    font-size: $veera-font-size-80;
+    padding: 4px 14px;
+    font-weight: 700;
   }
 }