Skip to content

Commit

Permalink
Merge branch 'main' into checkbackend
Browse files Browse the repository at this point in the history
  • Loading branch information
@danielfang97
danielfang97 authored Apr 19, 2024
2 parents 893191d + 5c3b7de commit 528dd32
Show file tree
Hide file tree
Showing 5 changed files with 84 additions and 31 deletions.
30 changes: 25 additions & 5 deletions frontend/components/Viewing/MetadataInfo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -353,8 +353,18 @@ export default function MetadataInfo({ title, link, label, icon, specific, uri,
value={currentValue}
onChange={(e) => handleEditMetadata(index, e.target.value, label)}
/>
<button className={styles.saveANDcancel} onClick={() => handleSaveEditMetadata(index, data, label)}>Save</button>
<button className={styles.saveANDcancel} onClick={() => handleCancelEdit(label)}>Cancel</button>
<button className={styles.button} onClick={() => handleSaveEditMetadata(index, data, label)}
style={{
backgroundColor: theme?.themeParameters?.[0]?.value || '#333', // Use theme color or default to #333
color: theme?.themeParameters?.[1]?.value || '#fff', // Use text color from theme or default to #fff
}}
>Save</button>
<button className={styles.button} onClick={() => handleCancelEdit(label)}
style={{
backgroundColor: theme?.themeParameters?.[0]?.value || '#333', // Use theme color or default to #333
color: theme?.themeParameters?.[1]?.value || '#fff', // Use text color from theme or default to #fff
}}
>Cancel</button>
</div>
) : (
// Display mode
Expand Down Expand Up @@ -427,11 +437,21 @@ export default function MetadataInfo({ title, link, label, icon, specific, uri,
value={newMetadata}
onChange={(e) => setNewMetadata(e.target.value)}
/>
<button className={styles.saveANDcancel} type="button" onClick={() => handleAddMetadata(label)}>Save</button>
<button className={styles.saveANDcancel} type="button" onClick={() => {
<button className={styles.button} type="button" onClick={() => handleAddMetadata(label)}
style={{
backgroundColor: theme?.themeParameters?.[0]?.value || '#333', // Use theme color or default to #333
color: theme?.themeParameters?.[1]?.value || '#fff', // Use text color from theme or default to #fff
}}
>Save</button>
<button className={styles.button} type="button" onClick={() => {
setIsEditing(false);
setNewMetadata(''); // Optional: Clear the input if needed
}}>Cancel</button>
}}
style={{
backgroundColor: theme?.themeParameters?.[0]?.value || '#333', // Use theme color or default to #333
color: theme?.themeParameters?.[1]?.value || '#fff', // Use text color from theme or default to #fff
}}
>Cancel</button>
</div>
) : null}
</div>
Expand Down
2 changes: 1 addition & 1 deletion frontend/components/Viewing/SidePanelTools.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -257,4 +257,4 @@ async function checkCuration(pluginData) {
}).catch(error => {return false;});
}
*/
*/
50 changes: 42 additions & 8 deletions frontend/components/Viewing/ViewHeader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ import { isUriOwner } from './Shell';
import getConfig from "next/config";
const { publicRuntimeConfig } = getConfig();

import { useTheme } from '../Admin/Theme';

export default function ViewHeader(properties) {
const [displayedTitle, setDisplayedTitle] = useState(properties.name); // New state for the displayed title
const [isEditingTitle, setIsEditingTitle] = useState(false);
Expand All @@ -32,6 +34,8 @@ export default function ViewHeader(properties) {
const [twinsData, setTwinsData] = useState(null);
const [usesData, setUsesData] = useState(null);

const { theme} = useTheme();

var displayTitle = properties.type;
if (properties.type.includes('#')) {
displayTitle = properties.type.split('#')[1];
Expand Down Expand Up @@ -202,8 +206,18 @@ export default function ViewHeader(properties) {
value={editedTitle}
onChange={(e) => setEditedTitle(e.target.value)}
/>
<button className={styles.saveANDcancel} onClick={handleSaveTitle}>Save</button>
<button className={styles.saveANDcancel} onClick={handleCancelTitle}>Cancel</button>
<button className={styles.button} onClick={handleSaveTitle}
style={{
backgroundColor: theme?.themeParameters?.[0]?.value || '#333', // Use theme color or default to #333
color: theme?.themeParameters?.[1]?.value || '#fff', // Use text color from theme or default to #fff
}}
>Save</button>
<button className={styles.button} onClick={handleCancelTitle}
style={{
backgroundColor: theme?.themeParameters?.[0]?.value || '#333', // Use theme color or default to #333
color: theme?.themeParameters?.[1]?.value || '#fff', // Use text color from theme or default to #fff
}}
>Cancel</button>
</div>
) : (
<div className={styles.titleContainer}>
Expand Down Expand Up @@ -259,8 +273,18 @@ export default function ViewHeader(properties) {
value={editedDescription}
onChange={(e) => setEditedDescription(e.target.value)}
/>
<button className={styles.saveANDcancel} onClick={saveDescription} >Save</button>
<button className={styles.saveANDcancel} onClick={() => setIsEditingDescription(false)} >Cancel</button>
<button className={styles.button} onClick={saveDescription}
style={{
backgroundColor: theme?.themeParameters?.[0]?.value || '#333', // Use theme color or default to #333
color: theme?.themeParameters?.[1]?.value || '#fff', // Use text color from theme or default to #fff
}}
>Save</button>
<button className={styles.button} onClick={() => setIsEditingDescription(false)}
style={{
backgroundColor: theme?.themeParameters?.[0]?.value || '#333', // Use theme color or default to #333
color: theme?.themeParameters?.[1]?.value || '#fff', // Use text color from theme or default to #fff
}}
>Cancel</button>
</div>
) : (
<div style={{ display: 'flex', alignItems: 'center' }}>
Expand Down Expand Up @@ -296,13 +320,24 @@ export default function ViewHeader(properties) {
</div>
<div>
{properties.search.similar && typeof checkSBOLExplorer?.data === 'string' && ( //TODO: Add check for SBOLExplorer
<button className={styles.simANDTwinbutton} onClick={similar}> Similar </button>
<button className={styles.button} onClick={similar}> Similar
</button>
)}
{properties.search.twins && (
<button className={styles.simANDTwinbutton} onClick={twins}> Twins </button>
<button className={styles.button} onClick={twins}>
style={{
backgroundColor: theme?.themeParameters?.[0]?.value || '#333', // Use theme color or default to #333
color: theme?.themeParameters?.[1]?.value || '#fff', // Use text color from theme or default to #fff
}}
Twins </button>
)}
{properties.search.uses && (
<button className={styles.simANDTwinbutton} onClick={uses}> Uses </button>
<button className={styles.button} onClick={uses}
style={{
backgroundColor: theme?.themeParameters?.[0]?.value || '#333', // Use theme color or default to #333
color: theme?.themeParameters?.[1]?.value || '#fff', // Use text color from theme or default to #fff
}}
> Uses </button>
)}
</div>
</div>
Expand All @@ -314,4 +349,3 @@ export function getAfterThirdSlash(uri) {
const afterThirdSlashParts = parts.slice(3);
return afterThirdSlashParts.join('/');
}

9 changes: 9 additions & 0 deletions frontend/pages/login.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@ import TopLevel from '../components/TopLevel';
import { login } from '../redux/actions';
import styles from '../styles/login.module.css';

import { useTheme } from '../../frontend/components/Admin/Theme';


/**
* This page renders the login page for sbh
*/
Expand All @@ -23,6 +26,8 @@ function Login() {
const dispatch = useDispatch();
const router = useRouter();

const { theme} = useTheme();

const next = router.query.next;

const passwordInput = useRef(null);
Expand Down Expand Up @@ -78,6 +83,10 @@ function Login() {
<div
role="button"
className={styles.submitbutton}
style={{
backgroundColor: theme?.themeParameters?.[0]?.value || '#333', // Use theme color or default to #333
color: theme?.themeParameters?.[1]?.value || '#fff', // Use text color from theme or default to #fff
}}
onClick={() => {
dispatch(login(username, password));
setUsername('');
Expand Down
24 changes: 7 additions & 17 deletions frontend/styles/view.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -408,18 +408,20 @@
cursor: pointer;
}

.saveANDcancel {
background-color: #D25627; /* This is a vibrant orange color */
color: #fff; /* White text for good contrast */
border: none; /* Remove default border */
cursor: pointer; /* Add cursor pointer for better UX */
/* ButtonStyles.css */
.button {
background-color: #D25627;
color: #fff;
border: none;
cursor: pointer;
font-family: 'Kardia Fit', sans-serif;
font-weight: 600;
margin: 0.5rem 0.2rem 0.5rem 0.5rem;
padding: 0.5rem;
border-radius: 0.3rem 0.3rem 0.3rem 0.3rem;
}


.description div {
margin-top: 0.5rem;
padding-left: 0.5rem;
Expand Down Expand Up @@ -1107,17 +1109,6 @@
}


.simANDTwinbutton {
background-color: #D25627; /* This is a vibrant orange color */
color: #fff; /* White text for good contrast */
border: none; /* Remove default border */
cursor: pointer; /* Add cursor pointer for better UX */
font-family: 'Kardia Fit', sans-serif;
font-weight: 600;
margin: 0.5rem 0.2rem 0.5rem 0.5rem;
padding: 0.5rem;
border-radius: 0.3rem 0.3rem 0.3rem 0.3rem;
}

.notFound {
display: 'flex';
Expand All @@ -1128,4 +1119,3 @@
};



0 comments on commit 528dd32

Please sign in to comment.