From 987fe19c64df95d6388c79889bb26e39ebe535bb Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Thu, 4 May 2023 05:43:21 +0300
Subject: [PATCH] TSK-1431,-1440: Update AttachmentPresenter. Replace colors,
 minor fixes. (#3131)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 packages/presentation/lang/en.json            |   1 +
 packages/presentation/lang/ru.json            |   1 +
 .../src/components/PDFViewer.svelte           |   6 +-
 packages/presentation/src/plugin.ts           |   1 +
 packages/theme/styles/_colors.scss            |  24 +--
 packages/theme/styles/_layouts.scss           |   4 +-
 packages/theme/styles/common.scss             |  12 +-
 packages/theme/styles/popups.scss             |  78 ++++----
 packages/ui/src/components/ListView.svelte    |   2 +-
 .../components/calendar/DatePresenter.svelte  |   8 +-
 .../calendar/DateRangePresenter.svelte        |   4 +-
 .../components/calendar/DueDatePopup.svelte   |   2 +-
 .../ui/src/components/internal/Root.svelte    |   2 +-
 .../src/components/TxView.svelte              |   4 +-
 .../src/components/TxViewTx.svelte            |   5 +-
 .../src/components/AttachmentPresenter.svelte | 168 ++++++++++--------
 .../src/components/AttachmentPreview.svelte   |   9 +-
 .../src/components/AttachmentStyledBox.svelte |   7 +-
 .../src/components/RequestActions.svelte      |   4 +-
 .../src/components/StatusTableView.svelte     |   2 +-
 .../src/components/icons/Lost.svelte          |   2 +-
 .../src/components/icons/Won.svelte           |   2 +-
 .../src/components/icons/StatusIcon.svelte    |   2 +-
 .../EstimationStatsPresenter.svelte           |   2 +-
 24 files changed, 188 insertions(+), 164 deletions(-)

diff --git a/packages/presentation/lang/en.json b/packages/presentation/lang/en.json
index 1172d3b51b..8c6b78c720 100644
--- a/packages/presentation/lang/en.json
+++ b/packages/presentation/lang/en.json
@@ -5,6 +5,7 @@
     "Ok": "Ok",
     "Save": "Save",
     "Download": "Download",
+    "Delete": "Delete",
     "Close": "Close",
     "NotSelected": "Not selected",
     "Deselect": "Deselect",
diff --git a/packages/presentation/lang/ru.json b/packages/presentation/lang/ru.json
index f872d6329a..3b9393f8f3 100644
--- a/packages/presentation/lang/ru.json
+++ b/packages/presentation/lang/ru.json
@@ -5,6 +5,7 @@
     "Ok": "Ок",
     "Save": "Сохранить",
     "Download": "Скачать",
+    "Delete": "Удалить",
     "Close": "Закрыть",
     "NotSelected": "Не выбрано",
     "Deselect": "Снять выделение",
diff --git a/packages/presentation/src/components/PDFViewer.svelte b/packages/presentation/src/components/PDFViewer.svelte
index 8924a0462a..a793158be9 100644
--- a/packages/presentation/src/components/PDFViewer.svelte
+++ b/packages/presentation/src/components/PDFViewer.svelte
@@ -96,8 +96,8 @@
     height: 2rem;
     font-weight: 500;
     font-size: 0.625rem;
-    color: var(--white-color);
-    background-color: var(--primary-bg-color);
+    color: var(--primary-button-color);
+    background-color: var(--primary-button-enabled);
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 0.5rem;
     cursor: pointer;
@@ -107,7 +107,7 @@
     overflow: auto;
     border-style: none;
     border-radius: 0.5rem;
-    background-color: var(--board-bg-color);
+    background-color: var(--theme-bg-color);
 
     &.img {
       display: flex;
diff --git a/packages/presentation/src/plugin.ts b/packages/presentation/src/plugin.ts
index bce8e4bbee..b3e9f9e7ae 100644
--- a/packages/presentation/src/plugin.ts
+++ b/packages/presentation/src/plugin.ts
@@ -34,6 +34,7 @@ export default plugin(presentationId, {
     Ok: '' as IntlString,
     Save: '' as IntlString,
     Download: '' as IntlString,
+    Delete: '' as IntlString,
     Close: '' as IntlString,
     NotSelected: '' as IntlString,
     Deselect: '' as IntlString,
diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss
index 400b0374ae..1b65242af1 100644
--- a/packages/theme/styles/_colors.scss
+++ b/packages/theme/styles/_colors.scss
@@ -121,6 +121,7 @@
   --theme-checkbox-disabled: #999;
   --theme-progress-color: #FFFFFF;
   --theme-popup-color: #292938;
+  --theme-popup-hover: #32323F;
   --theme-popup-divider: rgba(255, 255, 255, .1);
   --theme-popup-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1); // Light
   --theme-panel-color: #1A1A28;
@@ -131,6 +132,10 @@
   --theme-calendar-holiday-bgcolor: rgba(235, 87, 87, .1);
   --theme-calendar-weekend-bgcolor: rgba(242, 153, 74, .05);
 
+  --theme-error-color: #eb5757;
+  --theme-lost-color: #eb5757;
+  --theme-won-color: #34DB80;
+
   --body-color: #1f2023;
   --body-accent: #222326;
   --board-bg-color: #1c1d1f;
@@ -145,9 +150,9 @@
   --highlight-select-border: #44506b;
   --highlight-select-hover: #2c3346;
 
-  --scrollbar-bar-color: #303236;
-  --scrollbar-bar-hover: #8a8f98;
-  --scrollbar-track-color: #303236;
+  --scrollbar-bar-color: #35354a;
+  --scrollbar-bar-hover: #8a8aa5;
+  --scrollbar-track-color: #35354a;
 
   --trans-color: rgba(255, 255, 255, .3);
   --darker-color: rgba(255, 255, 255, .4);
@@ -159,9 +164,6 @@
   --white-color: #fff;
   --caret-color: #6e5ed2;
   --warning-color: #f2994a;
-  --error-color: #eb5757;
-  --lost-color: #eb5757;
-  --won-color: #34DB80;
 
   --divider-color: #303236;
   --divider-trans-color: rgba(255, 255, 255, .12);
@@ -281,7 +283,8 @@
   --theme-checkbox-border: rgba(0, 0, 0, .12);
   --theme-checkbox-disabled: #999;
   --theme-progress-color: rgba(0, 0, 0, .5);
-  --theme-popup-color: #F1F1F4;
+  --theme-popup-color: #FFFFFF;
+  --theme-popup-hover: #F5F5F5;
   --theme-popup-divider: rgba(0, 0, 0, .1);
   --theme-popup-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
   --theme-panel-color: #FFFFFF;
@@ -292,6 +295,10 @@
   --theme-calendar-holiday-bgcolor: rgba(235, 87, 87, .1);
   --theme-calendar-weekend-bgcolor: rgba(242, 153, 74, .1);
 
+  --theme-error-color: #eb5757;  // Dark
+  --theme-lost-color: #eb5757;  // Dark
+  --theme-won-color: #34DB80;  // Dark
+
   --body-color: #fff;
   --body-accent: #fafafa; // HZ
   --board-bg-color: #f4f5f8;
@@ -320,9 +327,6 @@
   --white-color: #fff;
   --caret-color: #6e5ed2;
   --warning-color: #f2994a;  // Dark
-  --error-color: #eb5757;  // Dark
-  --lost-color: #eb5757;  // Dark
-  --won-color: #34DB80;  // Dark
 
   --divider-color: #e0e0e0;
   --divider-trans-color: rgba(0, 0, 0, .12);
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index 806d2a45ac..2581432962 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -46,6 +46,7 @@ button {
   align-items: center;
   margin: 0;
   padding: 0;
+  font-family: inherit;
   font-size: inherit;
   background-color: transparent;
   border: 1px solid transparent;
@@ -492,6 +493,7 @@ input.search {
 .my-4 { margin: 1rem 0; }
 .my-5 { margin: 1.25rem 0; }
 
+.m--1 { margin: -.25rem; }
 .m-0-5 { margin: .125rem; }
 .m-1 { margin: .25rem; }
 
@@ -853,7 +855,7 @@ a.no-line {
 .caption-color { color: var(--caption-color); }
 
 .red-color { color: var(--highlight-red); }
-.error-color { color: var(--error-color); }
+.error-color { color: var(--theme-error-color); }
 
 .border-radius-4 { border-radius: 1rem; }
 .border-radius-3 { border-radius: 0.75rem; }
diff --git a/packages/theme/styles/common.scss b/packages/theme/styles/common.scss
index 0f618eb073..c9edb07227 100644
--- a/packages/theme/styles/common.scss
+++ b/packages/theme/styles/common.scss
@@ -365,21 +365,21 @@
       padding: .3125rem .5rem;
       min-width: 0;
       font-size: .875rem;
-      background-color: var(--accent-bg-color);
-      color: var(--dark-color);
-      border: 1px solid var(--divider-color);
+      background-color: var(--theme-button-enabled);
+      color: var(--theme-halfcontent-color);
+      border: 1px solid var(--theme-button-border);
       border-radius: .25rem;
 
       .tag-icon {
         margin-left: .5rem;
         width: 1rem;
         height: 1rem;
-        color: var(--accent-color);
+        color: var(--theme-content-color);
 
-        &:hover { color: var(--caption-color); }
+        &:hover { color: var(--theme-caption-color); }
       }
 
-      &.highlight { color: var(--content-color); }
+      &.highlight { color: var(--theme-content-color); }
     }
     &__tag + &__tag { margin-left: .375rem; }
   }
diff --git a/packages/theme/styles/popups.scss b/packages/theme/styles/popups.scss
index b2a1c8987d..359e4a5863 100644
--- a/packages/theme/styles/popups.scss
+++ b/packages/theme/styles/popups.scss
@@ -22,9 +22,10 @@
   min-width: 10rem;
   max-width: 15rem;
   max-height: 22rem;
-  background: var(--popup-bg-color);
+  background: var(--theme-popup-color);
+  // border: 1px solid var(--theme-popup-divider);
   border-radius: .5rem;
-  box-shadow: var(--popup-shadow);
+  box-shadow: var(--theme-popup-shadow);
 
   &.full-width {
     flex-grow: 1;
@@ -48,7 +49,7 @@
     max-width: 40rem !important;
   }
   .header {
-    border-bottom: 1px solid var(--popup-divider);
+    border-bottom: 1px solid var(--theme-popup-divider);
 
     &.no-border { border-bottom-color: transparent; }
     input {
@@ -72,12 +73,12 @@
       }
   
       &.show {
-        color: var(--content-color);
-        background-color: var(--button-border-color);
+        color: var(--theme-content-color);
+        background-color: var(--theme-button-enabled);
         cursor: pointer;
         &:hover {
-          color: var(--accent-color);
-          background-color: var(--button-border-hover);
+          color: var(--theme-caption-color);
+          background-color: var(--theme-button-hovered);
         }
       }
     }
@@ -104,7 +105,7 @@
     padding: .25rem .75rem;
     min-height: 2rem;
     text-align: left;
-    color: var(--caption-color);
+    color: var(--theme-content-color);
     cursor: pointer;
 
     &.high { height: 3rem; }
@@ -116,7 +117,7 @@
     .icon {
       width: 1rem;
       height: 1rem;
-      color: var(--content-color);
+      color: var(--theme-dark-color);
     }
     .color {
       width: .875rem;
@@ -144,12 +145,13 @@
     .check-right { margin: 0 0 0 2rem; }
     &:focus,
     &:hover {
-      background-color: var(--popup-bg-hover);
+      color: var(--theme-caption-color);
+      background-color: var(--theme-popup-hover);
 
-      .icon { color: var(--accent-color); }
+      .icon { color: var(--theme-content-color); }
     }
-    &.no-focus:focus { background-color: transparent; }
-    &.no-focus:hover { background-color: var(--popup-bg-hover); }
+    &.no-focus:focus { background-color: var(--theme-popup-hover); }
+    &.no-focus:hover { background-color: var(--theme-popup-hover); }
   }
   .sticky-wrapper {
     display: flex;
@@ -176,8 +178,8 @@
       font-weight: 500;
       font-size: .75rem;
       text-align: left;
-      color: var(--accent-color);
-      background-color: var(--button-bg-color);
+      color: var(--theme-content-color);
+      background-color: var(--theme-comp-header-color);
       cursor: pointer;
 
       .icon {
@@ -187,7 +189,7 @@
         transition: transform .15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
       }
       &.show .icon { transform: rotate(90deg); }
-      &:hover { color: var(--caption-color); }
+      &:hover { color: var(--theme-caption-color); }
       &.show + .menu-group { height: auto; }
     }
   }
@@ -200,9 +202,9 @@
   min-height: 0;
   min-width: 0;
   max-width: 30rem;
-  background: var(--popup-bg-color);
+  background: var(--theme-popup-color);
   border-radius: .25rem;
-  box-shadow: var(--popup-shadow);
+  box-shadow: var(--theme-popup-shadow);
   user-select: none;
 
   .ap-space {
@@ -234,21 +236,21 @@
     justify-content: flex-start;
     padding: 0 .5rem;
     height: 2rem;
-    color: var(--caption-color);
+    color: var(--theme-content-color);
     text-align: left;
     cursor: pointer;
 
     &.ap-woScroll { margin: 0 .5rem; }
-    &.selected { background: var(--popup-bg-hover); }
+    &.selected { background: var(--theme-popup-hover); }
     &.empty {
       display: flex;
       justify-content: center;
       font-style: italic;
-      color: var(--dark-color);
+      color: var(--theme-dark-color);
       cursor: default;
 
       &:hover {
-        color: var(--dark-color);
+        color: var(--theme-content-color);
         background-color: transparent;
       }
     }
@@ -256,13 +258,13 @@
     &.withIcon {
       margin: 0;
   
-      .icon { color: var(--content-color); }
-      &.hover .icon { color: var(--accent-color); }
+      .icon { color: var(--theme-dark-color); }
+      &.hover .icon { color: var(--theme-content-color); }
     }  
 
     // &:hover { background-color: var(--popup-bg-hover); }
     &.hover {
-      background-color: var(--popup-bg-hover);
+      background-color: var(--theme-popup-hover);
       outline: none;
       // box-shadow: inset 0 0 1px 1px var(--primary-edit-border-color);
     }
@@ -277,7 +279,7 @@
     &.separator {
       margin: 0.25rem 0;
       height: 1px;
-      background-color: var(--popup-divider);
+      background-color: var(--theme-popup-divider);
     }
   }
   .ap-check {
@@ -297,7 +299,7 @@
     cursor: pointer;
 
     &:hover {
-      background-color: var(--popup-bg-hover);
+      background-color: var(--theme-popup-divider);
       outline: none;
     }
   }
@@ -315,7 +317,7 @@
         font-size: .75rem;
         font-weight: 600;
         text-transform: uppercase;
-        color: var(--dark-color);
+        color: var(--theme-dark-color);
       }
     }
   }
@@ -325,7 +327,7 @@
       flex-shrink: 0;
       margin: 1rem 1rem .25rem;
       font-weight: 500;
-      color: var(--caption-color);
+      color: var(--theme-caption-color);
     }
     .ap-header {
       margin: .25rem 1rem 0;
@@ -344,14 +346,14 @@
 
       .ap-categoryItem {
         margin: .25rem;
-        color: var(--dark-color);
+        color: var(--theme-dark-color);
         cursor: pointer;
 
         &.selected { 
-          color: var(--accent-color) !important; 
+          color: var(--theme-content-color) !important; 
         }
         &:hover { 
-          color: var(--accent-color); 
+          color: var(--theme-content-color); 
         }
       }
 
@@ -388,14 +390,14 @@
   min-width: 0;
   min-height: 2rem;
   text-align: left;
-  color: var(--caption-color);
+  color: var(--theme-content-color);
   cursor: pointer;
 
-  .icon { color: var(--content-color); }
+  .icon { color: var(--theme-dark-color); }
   &:focus .icon,
   &.withHover:hover .icon,
-  &.withIconHover:hover .icon { color: var(--accent-color); }
-  &.withHover:hover { background-color: var(--popup-bg-hover); }
+  &.withIconHover:hover .icon { color: var(--theme-caption-color); }
+  &.withHover:hover { background-color: var(--theme-popup-hover); }
 }
 
 .antiPopup .ap-menuItem.arrow,
@@ -411,7 +413,7 @@
     top: 50%;
     right: 0.5rem;
     font-size: 0.375rem;
-    color: var(--dark-color);
+    color: var(--theme-dark-color);
     transform: translateY(-50%);
   }
 }
@@ -424,7 +426,7 @@
   min-height: 22rem;
   background: var(--theme-popup-color);
   border-radius: .5rem;
-  box-shadow: var(--popup-shadow);
+  box-shadow: var(--theme-popup-shadow);
   
   &:not(.min-w-168) { min-width: 22rem; }
   
diff --git a/packages/ui/src/components/ListView.svelte b/packages/ui/src/components/ListView.svelte
index 7e56b5849e..ede86e047a 100644
--- a/packages/ui/src/components/ListView.svelte
+++ b/packages/ui/src/components/ListView.svelte
@@ -93,7 +93,7 @@
       border-radius: 0.25rem;
     }
     .selection {
-      background-color: var(--menu-bg-select);
+      background-color: var(--theme-button-focused);
     }
   }
 </style>
diff --git a/packages/ui/src/components/calendar/DatePresenter.svelte b/packages/ui/src/components/calendar/DatePresenter.svelte
index a56bbb9409..fa3506cc07 100644
--- a/packages/ui/src/components/calendar/DatePresenter.svelte
+++ b/packages/ui/src/components/calendar/DatePresenter.svelte
@@ -167,10 +167,10 @@
         color: var(--warning-color);
       }
       &.critical {
-        color: var(--error-color);
+        color: var(--theme-error-color);
       }
       &.overdue {
-        color: var(--error-color);
+        color: var(--theme-error-color);
       }
     }
     .not-selected {
@@ -198,10 +198,10 @@
             color: var(--warning-color);
           }
           &.critical {
-            color: var(--error-color);
+            color: var(--theme-error-color);
           }
           &.overdue {
-            color: var(--error-color);
+            color: var(--theme-error-color);
           }
         }
         .time-divider {
diff --git a/packages/ui/src/components/calendar/DateRangePresenter.svelte b/packages/ui/src/components/calendar/DateRangePresenter.svelte
index 0a9637bcb0..11dd3a34f8 100644
--- a/packages/ui/src/components/calendar/DateRangePresenter.svelte
+++ b/packages/ui/src/components/calendar/DateRangePresenter.svelte
@@ -462,7 +462,7 @@
         color: var(--warning-color);
       }
       &.overdue {
-        color: var(--error-color);
+        color: var(--theme-error-color);
       }
     }
 
@@ -510,7 +510,7 @@
               color: var(--warning-color);
             }
             &.overdue {
-              color: var(--error-color);
+              color: var(--theme-error-color);
             }
           }
           .time-divider {
diff --git a/packages/ui/src/components/calendar/DueDatePopup.svelte b/packages/ui/src/components/calendar/DueDatePopup.svelte
index 89df17a187..a5a2f7b0a5 100644
--- a/packages/ui/src/components/calendar/DueDatePopup.svelte
+++ b/packages/ui/src/components/calendar/DueDatePopup.svelte
@@ -69,7 +69,7 @@
     }
 
     &.mIconContainerCritical {
-      color: var(--error-color);
+      color: var(--theme-error-color);
     }
   }
 
diff --git a/packages/ui/src/components/internal/Root.svelte b/packages/ui/src/components/internal/Root.svelte
index fc37557b15..8745bb6ff7 100644
--- a/packages/ui/src/components/internal/Root.svelte
+++ b/packages/ui/src/components/internal/Root.svelte
@@ -125,7 +125,7 @@
           >
             <svelte:component
               this={isMobile ? Phone : Computer}
-              fill={alwaysMobile ? 'var(--won-color)' : 'var(--content-color)'}
+              fill={alwaysMobile ? 'var(--theme-won-color)' : 'var(--content-color)'}
               size={'small'}
             />
           </div>
diff --git a/plugins/activity-resources/src/components/TxView.svelte b/plugins/activity-resources/src/components/TxView.svelte
index b67ad2fc7d..c4fb85e591 100644
--- a/plugins/activity-resources/src/components/TxView.svelte
+++ b/plugins/activity-resources/src/components/TxView.svelte
@@ -339,8 +339,8 @@
         <div class="activity-content content" class:indent={isAttached} class:contentHidden>
           <ShowMore ignore={edit}>
             {#if tx.collectionAttribute !== undefined && (tx.txDocIds?.size ?? 0) > 1}
-              <div class="flex-row-center flex-grow flex-wrap clear-mins">
-                <TxViewTx {tx} {onCancelEdit} {edit} {viewlet} />
+              <div class="flex-row-center flex-grow flex-wrap m--1 gap-around-2 clear-mins">
+                <TxViewTx {tx} {onCancelEdit} {edit} {viewlet} presentersOnly={isAttached} />
               </div>
             {:else if typeof viewlet.component === 'string'}
               <Component is={viewlet.component} {props} on:close={onCancelEdit} />
diff --git a/plugins/activity-resources/src/components/TxViewTx.svelte b/plugins/activity-resources/src/components/TxViewTx.svelte
index 2903f56ecd..c1b6c6eb2c 100644
--- a/plugins/activity-resources/src/components/TxViewTx.svelte
+++ b/plugins/activity-resources/src/components/TxViewTx.svelte
@@ -7,6 +7,7 @@
   export let tx: DisplayTx
   export let viewlet: TxDisplayViewlet
   export let edit: boolean
+  export let presentersOnly: boolean = false
   export let onCancelEdit: () => void
 
   function filterTx (dtx: DisplayTx[], _class: Ref<Class<Doc>>): DisplayTx[] {
@@ -22,7 +23,7 @@
 </script>
 
 {#each filterTx([...tx.txes, tx], core.class.TxCreateDoc) as ctx, i}
-  {#if i === 0}
+  {#if i === 0 && !presentersOnly}
     <IconAdd size={'x-small'} fill={'var(--trans-color)'} />
   {/if}
   {#if typeof viewlet?.component === 'string'}
@@ -32,7 +33,7 @@
   {/if}
 {/each}
 {#each filterTx([...tx.txes, tx], core.class.TxRemoveDoc) as ctx, i}
-  {#if i === 0}
+  {#if i === 0 && !presentersOnly}
     <IconDelete size={'x-small'} fill={'var(--trans-color)'} />
   {/if}
   {#if typeof viewlet?.component === 'string'}
diff --git a/plugins/attachment-resources/src/components/AttachmentPresenter.svelte b/plugins/attachment-resources/src/components/AttachmentPresenter.svelte
index e7395b4f9b..4efed0f7e1 100644
--- a/plugins/attachment-resources/src/components/AttachmentPresenter.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentPresenter.svelte
@@ -16,8 +16,8 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
   import type { Attachment } from '@hcengineering/attachment'
-  import { showPopup, closeTooltip, Icon, IconClose } from '@hcengineering/ui'
-  import { PDFViewer, getFileUrl } from '@hcengineering/presentation'
+  import { showPopup, closeTooltip, Label } from '@hcengineering/ui'
+  import presentation, { PDFViewer, getFileUrl } from '@hcengineering/presentation'
   import filesize from 'filesize'
 
   export let value: Attachment
@@ -67,6 +67,8 @@
     e.stopPropagation()
     window.open((e.target as HTMLAnchorElement).href, '_blank')
   }
+
+  let download: HTMLAnchorElement
 </script>
 
 <div class="flex-row-center attachment-container">
@@ -77,100 +79,112 @@
     on:click={clickHandler}
     on:mousedown={middleClickHandler}
   >
-    <div class="flex-center icon">
-      {iconLabel(value.name)}
+    <div
+      class="flex-center icon"
+      class:image={isImage(value.type)}
+      style:background-image={isImage(value.type) ? `url(${getFileUrl(value.file)})` : 'none'}
+    >
+      {#if !isImage(value.type)}{iconLabel(value.name)}{/if}
+    </div>
+  </a>
+  <div class="flex-col info-container">
+    <div class="name">
+      <a href={getFileUrl(value.file)} download={value.name} on:click={clickHandler} on:mousedown={middleClickHandler}>
+        {trimFilename(value.name)}
+      </a>
+    </div>
+    <div class="info-content">
+      {filesize(value.size, { spacer: '' })} •
+      <a class="no-line colorInherit" href={getFileUrl(value.file)} download={value.name} bind:this={download}>
+        <Label label={presentation.string.Download} />
+      </a>
       {#if removable}
         <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <div
-          class="remove-btn"
+        •
+        <span
+          class="remove-link"
           on:click={(ev) => {
             ev.stopPropagation()
             ev.preventDefault()
             dispatch('remove')
           }}
         >
-          <Icon icon={IconClose} size={'medium'} />
-        </div>
+          <Label label={presentation.string.Delete} />
+        </span>
       {/if}
     </div>
-  </a>
-  <div class="flex-col info">
-    <div class="name">
-      <a href={getFileUrl(value.file)} download={value.name} on:click={clickHandler} on:mousedown={middleClickHandler}>
-        {trimFilename(value.name)}
-      </a>
-    </div>
-    <div class="type">{filesize(value.size)}</div>
   </div>
 </div>
 
 <style lang="scss">
-  .icon {
-    position: relative;
-    flex-shrink: 0;
-    margin-right: 1rem;
-    width: 2rem;
-    height: 2rem;
-    font-weight: 500;
-    font-size: 0.625rem;
-    color: var(--white-color);
-    background-color: var(--primary-bg-color);
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 0.25rem;
-    cursor: pointer;
-
-    .remove-btn {
-      position: absolute;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-color: var(--primary-bg-hover);
-      border-radius: 0.25rem;
-      opacity: 0;
-    }
-  }
   .attachment-container {
-    margin-right: 0.5rem;
-    // padding: .375rem;
-    // width: 14rem;
-    // min-width: 14rem;
-    // max-width: 14rem;
-    // background-color: var(--accent-bg-color);
-    // border: 1px solid var(--divider-color);
-    // border-radius: .25rem;
+    padding: 0.375rem 0.75rem 0.375rem 0.375rem;
+    width: auto;
+    min-width: 14rem;
+    max-width: 19rem;
+    background-color: var(--theme-button-enabled);
+    border: 1px solid var(--theme-button-border);
+    border-radius: 0.25rem;
 
-    &:hover .remove-btn {
-      opacity: 1;
+    .icon {
+      flex-shrink: 0;
+      margin-right: 0.75rem;
+      width: 3.25rem;
+      height: 3.25rem;
+      border: 1px solid var(--primary-button-border);
+      border-radius: 0.25rem;
+      cursor: pointer;
+
+      &:not(.image) {
+        color: var(--primary-button-color);
+        background-color: var(--primary-button-enabled);
+      }
+      &.image {
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: cover;
+      }
     }
-  }
+    .name {
+      white-space: nowrap;
+      font-size: 0.8125rem;
+      color: var(--theme-caption-color);
+      cursor: pointer;
+    }
+    .info-content {
+      margin-top: 0.125rem;
+      white-space: nowrap;
+      font-size: 0.6875rem;
+      color: var(--theme-darker-color);
+    }
+    .remove-link {
+      color: var(--theme-error-color);
+      cursor: pointer;
 
-  .name {
-    white-space: nowrap;
-    font-weight: 500;
-    color: var(--accent-color);
-    cursor: pointer;
-  }
+      &:hover {
+        text-decoration-line: underline;
+      }
+    }
+    a.colorInherit {
+      color: inherit;
 
-  .type {
-    white-space: nowrap;
-    font-size: 0.75rem;
-    color: var(--dark-color);
-  }
+      &:hover {
+        text-decoration: underline;
+        color: var(--theme-dark-color);
+      }
+    }
 
-  .name:hover,
-  .icon:hover + .info > .name,
-  .no-line:hover + .info > .name a {
-    text-decoration: underline;
-    color: var(--caption-color);
-  }
-  .name:active,
-  .icon:active + .info > .name,
-  .no-line:active + .info > .name a {
-    text-decoration: underline;
-    color: var(--accent-color);
+    .name:hover,
+    .icon:hover + .info-container > .name,
+    .no-line:hover + .info-container > .name a {
+      text-decoration: underline;
+      color: var(--theme-caption-color);
+    }
+    .name:active,
+    .icon:active + .info-container > .name,
+    .no-line:active + .info-container > .name a {
+      text-decoration: underline;
+      color: var(--theme-caption-color);
+    }
   }
 </style>
diff --git a/plugins/attachment-resources/src/components/AttachmentPreview.svelte b/plugins/attachment-resources/src/components/AttachmentPreview.svelte
index b5d82a12db..1583c9fcc3 100644
--- a/plugins/attachment-resources/src/components/AttachmentPreview.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentPreview.svelte
@@ -67,7 +67,7 @@
     </div>
   </div>
 {:else}
-  <div class="flex container buttonContainer extraWidth">
+  <div class="flex buttonContainer extraWidth">
     <AttachmentPresenter {value} />
     <div class="actions conner">
       <AttachmentActions attachment={value} {isSaved} />
@@ -76,13 +76,6 @@
 {/if}
 
 <style lang="scss">
-  .container {
-    background-color: var(--board-card-bg-color);
-    border: 1px solid var(--button-border-color);
-    border-radius: 0.5rem;
-    padding: 0.5rem;
-  }
-
   .buttonContainer {
     position: relative;
     width: fit-content;
diff --git a/plugins/attachment-resources/src/components/AttachmentStyledBox.svelte b/plugins/attachment-resources/src/components/AttachmentStyledBox.svelte
index 34d77445f4..a4360588e2 100644
--- a/plugins/attachment-resources/src/components/AttachmentStyledBox.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentStyledBox.svelte
@@ -345,7 +345,7 @@
   {#if attachments.size && fakeAttach === 'normal'}
     <div class="flex-row-center list scroll-divider-color">
       {#each Array.from(attachments.values()) as attachment}
-        <div class="item flex">
+        <div class="item flex-center flex-no-shrink clear-mins">
           {#if useAttachmentPreview}
             <AttachmentPreview value={attachment} />
           {:else}
@@ -365,6 +365,7 @@
 
 <style lang="scss">
   .list {
+    align-items: stretch;
     margin-top: 0.5rem;
     padding: 0.5rem;
     min-width: 0;
@@ -375,7 +376,11 @@
     border: 1px solid var(--theme-button-border);
     border-radius: 0.25rem;
 
+    .item {
+      min-height: 100%;
+    }
     .item + .item {
+      margin-left: 1rem;
       padding-left: 1rem;
       border-left: 1px solid var(--theme-divider-color);
     }
diff --git a/plugins/request-resources/src/components/RequestActions.svelte b/plugins/request-resources/src/components/RequestActions.svelte
index 2614363f34..8582d4387e 100644
--- a/plugins/request-resources/src/components/RequestActions.svelte
+++ b/plugins/request-resources/src/components/RequestActions.svelte
@@ -98,7 +98,7 @@
       icon: DocSuccess,
       action: () => approve(),
       order: 1000,
-      fill: 'var(--won-color)',
+      fill: 'var(--theme-won-color)',
       disabled
     },
     {
@@ -106,7 +106,7 @@
       icon: DocFail,
       action: () => reject(),
       order: 2000,
-      fill: 'var(--lost-color)',
+      fill: 'var(--theme-lost-color)',
       disabled
     }
   ]
diff --git a/plugins/task-resources/src/components/StatusTableView.svelte b/plugins/task-resources/src/components/StatusTableView.svelte
index 8c6981925a..e89e7172ad 100644
--- a/plugins/task-resources/src/components/StatusTableView.svelte
+++ b/plugins/task-resources/src/components/StatusTableView.svelte
@@ -66,7 +66,7 @@
           id: s._id,
           label: s.name,
           icon: s._class === task.class.WonState ? Won : Lost,
-          color: s._class === task.class.WonState ? 'var(--won-color)' : 'var(--lost-color)'
+          color: s._class === task.class.WonState ? 'var(--theme-won-color)' : 'var(--theme-lost-color)'
         }
       })
       itemsDS.unshift({ id: 'NoDoneState', labelIntl: task.string.NoDoneState })
diff --git a/plugins/task-resources/src/components/icons/Lost.svelte b/plugins/task-resources/src/components/icons/Lost.svelte
index 8f1cdc7a67..bc53342351 100644
--- a/plugins/task-resources/src/components/icons/Lost.svelte
+++ b/plugins/task-resources/src/components/icons/Lost.svelte
@@ -16,7 +16,7 @@
 <script lang="ts">
   export let size: 'small' | 'medium' | 'large'
   export let style: 'normal' | 'circle' = 'normal'
-  export let fill: string = 'var(--lost-color)'
+  export let fill: string = 'var(--theme-lost-color)'
 </script>
 
 <svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
diff --git a/plugins/task-resources/src/components/icons/Won.svelte b/plugins/task-resources/src/components/icons/Won.svelte
index 848e160763..bb6f1fefd8 100644
--- a/plugins/task-resources/src/components/icons/Won.svelte
+++ b/plugins/task-resources/src/components/icons/Won.svelte
@@ -16,7 +16,7 @@
 <script lang="ts">
   export let size: 'small' | 'medium' | 'large'
   export let style: 'normal' | 'circle' = 'normal'
-  export let fill: string = 'var(--won-color)'
+  export let fill: string = 'var(--theme-won-color)'
 </script>
 
 <svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
diff --git a/plugins/tracker-resources/src/components/icons/StatusIcon.svelte b/plugins/tracker-resources/src/components/icons/StatusIcon.svelte
index d586b6b474..2d21761bf3 100644
--- a/plugins/tracker-resources/src/components/icons/StatusIcon.svelte
+++ b/plugins/tracker-resources/src/components/icons/StatusIcon.svelte
@@ -65,7 +65,7 @@
         transform="translate(3.5,3.5)"
       />
     {:else}
-      <circle cx="8" cy="8" r="4" fill="var(--error-color)" opacity=".15" />
+      <circle cx="8" cy="8" r="4" fill="var(--theme-error-color)" opacity=".15" />
     {/if}
   {:else if category._id === tracker.issueStatusCategory.Completed}
     <path
diff --git a/plugins/tracker-resources/src/components/issues/timereport/EstimationStatsPresenter.svelte b/plugins/tracker-resources/src/components/issues/timereport/EstimationStatsPresenter.svelte
index 39877f7d43..a686fd3ad4 100644
--- a/plugins/tracker-resources/src/components/issues/timereport/EstimationStatsPresenter.svelte
+++ b/plugins/tracker-resources/src/components/issues/timereport/EstimationStatsPresenter.svelte
@@ -129,7 +129,7 @@
     }
 
     .showError {
-      color: var(--error-color) !important;
+      color: var(--theme-error-color) !important;
     }
     .showWarning {
       color: var(--warning-color) !important;