u

src/components/manifest/Attachment.jsx

@@ -10,6 +10,18 @@ import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined
 import { tileBaseSx, TILE_SIZE } from 'dashgui/tiles';
 import { generateTextThumbnail } from '../../utils/textThumbnail';
 import { notifyErrorMessage } from '../../utils/notify';
+import {
+  SCRIM_ACTION,
+  SCRIM_ATTACHMENT,
+  SCRIM_HEAVY,
+  SURFACE_BASE,
+  SURFACE_FAINT,
+  SURFACE_RAISED,
+  SURFACE_SUBTLE,
+  VEIL_DISABLED,
+  VEIL_TEXT,
+  WHITE,
+} from '../../colors';
 
 export class Attachment extends PureComponent {
   state = {
@@ -120,7 +132,7 @@ export class Attachment extends PureComponent {
           position: 'relative',
           overflow: 'hidden',
           cursor: disabled ? 'default' : 'pointer',
-          bgcolor: isText ? '#fcfcfc' : '#f8fafc',
+          bgcolor: isText ? SURFACE_FAINT : SURFACE_BASE,
           border: '1px solid',
           borderColor: 'divider',
           ...(disabled ? { opacity: 0.6, pointerEvents: 'none' } : {}),
@@ -135,7 +147,7 @@ export class Attachment extends PureComponent {
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
-            bgcolor: isText ? '#fafafa' : '#f1f5f9',
+            bgcolor: isText ? SURFACE_SUBTLE : SURFACE_RAISED,
           }}
         >
           {thumbnail ? (
@@ -156,7 +168,7 @@ export class Attachment extends PureComponent {
                 width: '100%',
                 height: '100%',
                 p: 1.25,
-                bgcolor: '#fafafa',
+                bgcolor: SURFACE_SUBTLE,
                 display: 'flex',
                 flexDirection: 'column',
                 justifyContent: 'flex-start',
@@ -243,13 +255,13 @@ export class Attachment extends PureComponent {
                   disabled={disabled || hasArticles}
                   onClick={this.handleRescan}
                   sx={{
-                    bgcolor: 'rgba(0, 0, 0, 0.6)',
-                    color: hasArticles ? 'rgba(255, 255, 255, 0.3)' : '#fff',
+                    bgcolor: SCRIM_ACTION,
+                    color: hasArticles ? VEIL_DISABLED : WHITE,
                     p: 0.5,
                     backdropFilter: 'blur(2px)',
                     cursor: hasArticles ? 'not-allowed' : 'pointer',
                     '&:hover': {
-                      bgcolor: hasArticles ? 'rgba(0, 0, 0, 0.6)' : 'rgba(0, 0, 0, 0.85)',
+                      bgcolor: hasArticles ? SCRIM_ACTION : SCRIM_HEAVY,
                     },
                   }}
                 >
@@ -265,8 +277,8 @@ export class Attachment extends PureComponent {
                 disabled={disabled}
                 onClick={this.handleDelete}
                 sx={{
-                  bgcolor: 'rgba(0, 0, 0, 0.6)',
-                  color: '#fff',
+                  bgcolor: SCRIM_ACTION,
+                  color: WHITE,
                   p: 0.5,
                   backdropFilter: 'blur(2px)',
                   '&:hover': { bgcolor: 'error.main' },
@@ -287,7 +299,7 @@ export class Attachment extends PureComponent {
             bottom: 0,
             px: 1,
             py: 0.5,
-            background: 'linear-gradient(transparent, rgba(0,0,0,0.75) 40%, rgba(0,0,0,0.85))',
+            background: SCRIM_ATTACHMENT,
             textAlign: 'left',
             pointerEvents: 'none',
           }}
@@ -296,7 +308,7 @@ export class Attachment extends PureComponent {
             variant="caption"
             fontWeight={600}
             noWrap
-            sx={{ color: '#fff', display: 'block', fontSize: '0.72rem', lineHeight: 1.2 }}
+            sx={{ color: WHITE, display: 'block', fontSize: '0.72rem', lineHeight: 1.2 }}
           >
             {name}
           </Typography>
@@ -304,7 +316,7 @@ export class Attachment extends PureComponent {
             <Typography
               variant="caption"
               noWrap
-              sx={{ color: 'rgba(255,255,255,0.8)', fontSize: '0.65rem' }}
+              sx={{ color: VEIL_TEXT, fontSize: '0.65rem' }}
             >
               {this.formatFileSize(size)}
             </Typography>