BASIRA #286 - Adjusting CSS of artwork titles

performant-software · Dec 20, 2024 · 187914e · 187914e
1 parent 071c3ce
commit 187914e
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 9 deletions.
diff --git a/client/src/components/ArtworkTitles.css b/client/src/components/ArtworkTitles.css
@@ -1,5 +1,10 @@
-.artwork-titles .icon.white {
-  color: #FFFFFF;
+.artwork-titles.list > .item > .content > .list-header {
+  display: flex;
+  align-items: center;
+}
+
+.artwork-titles.list > .item > .content > .list-header > .icon {
+  margin-left: 0.5em;
 }
 
 .artwork-titles.list > .item > .content > .description {

diff --git a/client/src/components/ArtworkTitles.js b/client/src/components/ArtworkTitles.js
@@ -1,10 +1,10 @@
 // @flow
 
 import React from 'react';
-import { List } from 'semantic-ui-react';
+import { Header, Icon, List } from 'semantic-ui-react';
 import _ from 'underscore';
-import Qualifiables from '../utils/Qualifiables';
 import type { ArtworkTitle } from '../types/ArtworkTitle';
+import Qualifiables from '../utils/Qualifiables';
 import './ArtworkTitles.css';
 
 type Props = {
@@ -24,14 +24,22 @@ const ArtworkTitles = (props: Props) => {
     >
       { _.map(props.items, (item) => (
         <List.Item>
-          <List.Icon
-            color={item.primary ? 'green' : 'white'}
-            name='check circle'
-          />
           <List.Content>
             <List.Header
+              className='list-header'
               content={item.title}
-            />
+            >
+              <Header
+                content={item.title}
+                size='small'
+              />
+              { item.primary && (
+                <Icon
+                  color='green'
+                  name='check circle'
+                />
+              )}
+            </List.Header>
             <List.Description
               content={Qualifiables.getValueListValue(item, 'Artwork', 'Title Type')}
             />