Skip to content

Commit a6d3d1d

Browse files
Andre-DiamondAndre-Diamond
authored
Merge pull request #137 from SingularityNET-Archive:development
refactor: Update styles to lightmode
2 parents be9899e + c7a9065 commit a6d3d1d

17 files changed

+660
-374
lines changed

‎components/ActionItem.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useEffect, useRef } from 'react';
2-
import styles from '../styles/typea.module.css';
2+
import styles from '../styles/actionitems.module.css';
33
import SelectNames from '../components/SelectNames';
44

55
const formatDate = (dateString: any) => {

‎components/DecisionItem.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useEffect, useRef } from 'react';
2-
import styles from '../styles/typea.module.css';
2+
import styles from '../styles/decisionitems.module.css';
33

44
const DecisionItem = ({ item, itemIndex, handleUpdate, onRemove, agendaIndex, type }: any) => {
55
const decisionRef = useRef<HTMLTextAreaElement>(null);

‎components/SelectNames.tsx‎

Lines changed: 38 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -45,43 +45,44 @@ const SelectNames: React.FC<SelectNamesProps> = ({ onSelect, initialValue }) =>
4545
title="When you type, hit enter to add item and start typing again to add another or select from the dropdown. You can also paste a comma-separated list of names."
4646
onPaste={handlePaste}
4747
>
48-
<CreatableSelect
49-
isMulti
50-
options={options}
51-
value={selectedLabels}
52-
onChange={(selected) => {
53-
handleInputChange(selected || []);
54-
}}
55-
styles={{
56-
control: (baseStyles, state) => ({
57-
...baseStyles,
58-
borderColor: state.isFocused ? 'grey' : 'white',
59-
backgroundColor: 'black',
60-
color: 'white',
61-
}),
62-
option: (baseStyles, { isFocused, isSelected }) => ({
63-
...baseStyles,
64-
backgroundColor: isSelected ? 'darkblue' : isFocused ? 'darkgray' : 'black',
65-
color: 'white',
66-
}),
67-
multiValue: (baseStyles) => ({
68-
...baseStyles,
69-
backgroundColor: 'darkblue',
70-
}),
71-
multiValueLabel: (baseStyles) => ({
72-
...baseStyles,
73-
color: 'white',
74-
}),
75-
input: (baseStyles) => ({
76-
...baseStyles,
77-
color: 'white',
78-
}),
79-
menu: (baseStyles) => ({
80-
...baseStyles,
81-
backgroundColor: 'black',
82-
}),
83-
}}
84-
/>
48+
<CreatableSelect
49+
isMulti
50+
options={options}
51+
value={selectedLabels}
52+
onChange={(selected) => {
53+
handleInputChange(selected || []);
54+
}}
55+
styles={{
56+
control: (baseStyles, state) => ({
57+
...baseStyles,
58+
borderColor: state.isFocused ? '#007bff' : '#ced4da',
59+
backgroundColor: 'white',
60+
color: 'black',
61+
}),
62+
option: (baseStyles, { isFocused, isSelected }) => ({
63+
...baseStyles,
64+
backgroundColor: isSelected ? '#007bff' : isFocused ? '#f8f9fa' : 'white',
65+
color: isSelected ? 'white' : 'black',
66+
}),
67+
multiValue: (baseStyles) => ({
68+
...baseStyles,
69+
backgroundColor: '#e9ecef',
70+
}),
71+
multiValueLabel: (baseStyles) => ({
72+
...baseStyles,
73+
color: 'black',
74+
}),
75+
input: (baseStyles) => ({
76+
...baseStyles,
77+
color: 'black',
78+
}),
79+
menu: (baseStyles) => ({
80+
...baseStyles,
81+
backgroundColor: 'white',
82+
boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
83+
}),
84+
}}
85+
/>
8586
</div>
8687
);
8788
};

‎components/SelectTags.tsx‎

Lines changed: 37 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -35,42 +35,43 @@ const SelectTags: React.FC<SelectTagsProps> = ({ onSelect, initialValue, type })
3535
return (
3636
<div title="When you type, hit enter to add item and start typing again to add another or select from the dropdown">
3737
<CreatableSelect
38-
isMulti
39-
options={options}
40-
value={selectedLabels} // Make it a controlled component
41-
onChange={(selected) => {
42-
handleInputChange(selected || []);
43-
}}
44-
styles={{
45-
control: (baseStyles, state) => ({
46-
...baseStyles,
47-
borderColor: state.isFocused ? 'grey' : 'white',
48-
backgroundColor: 'black',
49-
color: 'white',
50-
}),
51-
option: (baseStyles, { isFocused, isSelected }) => ({
52-
...baseStyles,
53-
backgroundColor: isSelected ? 'darkblue' : isFocused ? 'darkgray' : 'black',
54-
color: 'white',
55-
}),
56-
multiValue: (baseStyles) => ({
57-
...baseStyles,
58-
backgroundColor: 'darkblue',
59-
}),
60-
multiValueLabel: (baseStyles) => ({
61-
...baseStyles,
62-
color: 'white',
63-
}),
64-
input: (baseStyles) => ({
65-
...baseStyles,
66-
color: 'white',
67-
}),
68-
menu: (baseStyles) => ({
69-
...baseStyles,
70-
backgroundColor: 'black',
71-
}),
72-
}}
73-
/>
38+
isMulti
39+
options={options}
40+
value={selectedLabels}
41+
onChange={(selected) => {
42+
handleInputChange(selected || []);
43+
}}
44+
styles={{
45+
control: (baseStyles, state) => ({
46+
...baseStyles,
47+
borderColor: state.isFocused ? '#007bff' : '#ced4da',
48+
backgroundColor: 'white',
49+
color: 'black',
50+
}),
51+
option: (baseStyles, { isFocused, isSelected }) => ({
52+
...baseStyles,
53+
backgroundColor: isSelected ? '#007bff' : isFocused ? '#f8f9fa' : 'white',
54+
color: isSelected ? 'white' : 'black',
55+
}),
56+
multiValue: (baseStyles) => ({
57+
...baseStyles,
58+
backgroundColor: '#e9ecef',
59+
}),
60+
multiValueLabel: (baseStyles) => ({
61+
...baseStyles,
62+
color: 'black',
63+
}),
64+
input: (baseStyles) => ({
65+
...baseStyles,
66+
color: 'black',
67+
}),
68+
menu: (baseStyles) => ({
69+
...baseStyles,
70+
backgroundColor: 'white',
71+
boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
72+
}),
73+
}}
74+
/>
7475
</div>
7576
);
7677
};

‎components/nav.tsx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
// ../components/nav.tsx
12
import Link from 'next/link';
23
import axios from 'axios';
34
import { useState, useEffect } from "react";
@@ -6,6 +7,7 @@ import { Session } from "@supabase/supabase-js";
67
import { useMyVariable } from '../context/MyVariableContext';
78
import { saveUser } from '../utils/saveUser'
89
import { fetchLatestTag } from '../utils/fetchLatestTag';
10+
import styles from '../styles/nav.module.css';
911

1012
type RoleData = {
1113
roles: {
@@ -117,22 +119,22 @@ const Nav = () => {
117119
}
118120

119121
return (
120-
<nav className="routes">
121-
<div className="navLeft">
122-
<Link href="/" className="navitems">
122+
<nav className={styles.routes}>
123+
<div className={styles.navLeft}>
124+
<Link href="/" className={styles.navitems}>
123125
Home
124126
</Link>
125-
<Link href='/submit-meeting-summary' className="navitems">
127+
<Link href='/submit-meeting-summary' className={styles.navitems}>
126128
Submit Meeting Summary
127129
</Link>
128-
<Link href='/issues' className="navitems">
130+
<Link href='/issues' className={styles.navitems}>
129131
Issues
130132
</Link>
131133
{roleData?.appRole == "admin" && (<>
132-
<Link href='/status-of-summaries' className="navitems">
134+
<Link href='/status-of-summaries' className={styles.navitems}>
133135
Summaries
134136
</Link>
135-
<Link href='/admin-tools' className="navitems">
137+
<Link href='/admin-tools' className={styles.navitems}>
136138
Admin Tools
137139
</Link>
138140
</>
@@ -141,11 +143,11 @@ const Nav = () => {
141143
<div>{latestTag}</div>
142144
<div>
143145
{!session && (
144-
<button onClick={signInWithDiscord} className="navitems">
146+
<button onClick={signInWithDiscord} className={styles.navitems}>
145147
Sign In with Discord
146148
</button>)}
147149
{session && (
148-
<button onClick={signout} className="navitems">
150+
<button onClick={signout} className={styles.navitems}>
149151
Sign Out
150152
</button>)}
151153
</div>

‎styles/actionitems.module.css‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
.action-item {
2+
border-radius: 5px;
3+
padding: 10px;
4+
margin: 10px;
5+
background-color: white;
6+
border: 1px solid #d0d0d0;
7+
}
8+
9+
.agenda-title {
10+
display: flex;
11+
flex-direction: column;
12+
}
13+
14+
.row-flex-space-between {
15+
display: flex;
16+
justify-content: space-between;
17+
}
18+
19+
.row-flex-start {
20+
display: flex;
21+
flex-wrap: wrap;
22+
}
23+
24+
.action-assignee-column-flex {
25+
display: flex;
26+
flex-direction: column;
27+
margin-right: 12px;
28+
}
29+
30+
.column-flex {
31+
display: flex;
32+
flex-direction: column;
33+
}
34+
35+
.form-label {
36+
display: block;
37+
margin-bottom: 0.1rem;
38+
font-size: 0.9rem;
39+
font-weight: bold;
40+
color: #333;
41+
}
42+
43+
.form-input,
44+
.form-select {
45+
padding: 0.6rem;
46+
border-radius: 4px;
47+
margin-bottom: 1rem;
48+
margin-right: 1em;
49+
background-color: white;
50+
color: #333;
51+
border: 1px solid #ccc;
52+
}
53+
54+
.form-input {
55+
min-height: 30px;
56+
overflow-y: hidden;
57+
resize: none;
58+
}
59+
60+
.remove-button {
61+
padding: 0.6rem;
62+
border: 1px solid #ccc;
63+
border-radius: 4px;
64+
margin-top: 1rem;
65+
background-color: black;
66+
color: white;
67+
cursor: pointer;
68+
}
69+
70+
.remove-button:hover {
71+
background-color: #671d1d;
72+
}

0 commit comments

Comments
 (0)