Skip to content

Commit

Permalink
Merge pull request #483 from MytsV/feature-minor_visual_improvements
Browse files Browse the repository at this point in the history 
Urgent minor visual improvements
  • Loading branch information
@maany
maany authored Sep 29, 2024
2 parents f8bc108 + bc8064c commit 56aedf1
Show file tree
Hide file tree
Showing 12 changed files with 94 additions and 96 deletions.
Binary file added public/experiment-logo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 6 additions & 2 deletions src/component-library/features/table/cells/selection-cells.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,11 @@ const iconSize = 'h-5 w-5';
export const SelectableCell = (props: { onSelect: () => void; selected: boolean; value: string }) => {
return (
<div className={containerStyles} onClick={props.onSelect}>
{props.selected ? <HiCheck className={`text-base-success-600 ${iconSize}`} /> : <HiPlus className={`text-brand-500 ${iconSize}`} />}
{props.selected ? (
<HiCheck className={`flex-shrink-0 text-base-success-600 ${iconSize}`} />
) : (
<HiPlus className={`flex-shrink-0 text-brand-500 ${iconSize}`} />
)}
<span>{props.value}</span>
</div>
);
Expand All @@ -16,7 +20,7 @@ export const SelectableCell = (props: { onSelect: () => void; selected: boolean;
export const RemovableCell = (props: { onClick: () => void; value: string }) => {
return (
<div className={containerStyles} onClick={props.onClick}>
<HiMinus className={`text-base-error-500 ${iconSize}`} />
<HiMinus className={`flex-shrink-0 text-base-error-500 ${iconSize}`} />
<span>{props.value}</span>
</div>
);
Expand Down
39 changes: 5 additions & 34 deletions src/component-library/outputtailwind.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -687,11 +687,6 @@ html {
margin-bottom: 0.5rem;
}

.my-3 {
margin-top: 0.75rem;
margin-bottom: 0.75rem;
}

.my-5 {
margin-top: 1.25rem;
margin-bottom: 1.25rem;
Expand Down Expand Up @@ -1809,21 +1804,6 @@ html {
background-color: rgb(100 116 139 / var(--tw-bg-opacity));
}

.bg-neutral-600 {
--tw-bg-opacity: 1;
background-color: rgb(71 85 105 / var(--tw-bg-opacity));
}

.bg-neutral-700 {
--tw-bg-opacity: 1;
background-color: rgb(51 65 85 / var(--tw-bg-opacity));
}

.bg-neutral-800 {
--tw-bg-opacity: 1;
background-color: rgb(30 41 59 / var(--tw-bg-opacity));
}

.bg-neutral-900 {
--tw-bg-opacity: 1;
background-color: rgb(15 23 42 / var(--tw-bg-opacity));
Expand Down Expand Up @@ -2651,6 +2631,11 @@ html {
background-color: rgb(226 232 240 / var(--tw-bg-opacity));
}

.hover\:bg-neutral-300:hover {
--tw-bg-opacity: 1;
background-color: rgb(203 213 225 / var(--tw-bg-opacity));
}

.hover\:bg-neutral-400:hover {
--tw-bg-opacity: 1;
background-color: rgb(148 163 184 / var(--tw-bg-opacity));
Expand Down Expand Up @@ -2734,20 +2719,10 @@ html {
background-color: rgb(139 92 246 / var(--tw-bg-opacity));
}

.focus\:bg-neutral-100:focus {
--tw-bg-opacity: 1;
background-color: rgb(241 245 249 / var(--tw-bg-opacity));
}

.focus\:bg-opacity-20:focus {
--tw-bg-opacity: 0.2;
}

.focus\:text-text-900:focus {
--tw-text-opacity: 1;
color: rgb(15 23 42 / var(--tw-text-opacity));
}

.focus\:shadow-brand:focus {
--tw-shadow: 0 0 0 3px color-mix(in srgb, transparent, #8b5cf6 50%);
--tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);
Expand Down Expand Up @@ -3840,10 +3815,6 @@ html {
width: 12rem;
}

.lg\:w-96 {
width: 24rem;
}

.lg\:w-\[50rem\] {
width: 50rem;
}
Expand Down
4 changes: 2 additions & 2 deletions src/component-library/pages/Dashboard/widgets/TopRulesWidget.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const openRule = (id: string) => {
};

const LinkTick = (props: any) => {
const id = props.payload.value;
const id = props.payload.value.substring(0, 12);
const fill = props.fill;

return (
Expand Down Expand Up @@ -140,7 +140,7 @@ const RuleBarChart = ({ rules }: { rules: RuleViewModel[] }) => {
}}
stroke={fillColor}
/>
<YAxis dataKey="id" type="category" tick={<LinkTick fill={fillColor} />} width={315} stroke={fillColor} />
<YAxis dataKey="id" type="category" tick={<LinkTick fill={fillColor} />} width={120} stroke={fillColor} />
<Tooltip content={<CustomTooltip />} cursor={{ fill: borderColor }} />
{getStyledBar('locksOkPercentage')}
{getStyledBar('locksReplicatingPercentage')}
Expand Down
15 changes: 14 additions & 1 deletion src/component-library/pages/Rule/create/stage-submission/CreateRuleStageSubmission.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,12 +103,25 @@ export const CreateRuleStageSubmission = ({ parameters, removeSaved }: CreateRul
}, [data]);

const getDataComponent = () => {
if (!data) return;

const button = (
<Link href="/rule/list" className="cursor-pointer hover:text-brand-500">
<b>rules list</b>
</Link>
);
return <span className="text-neutral-900 dark:text-neutral-100">Successfully requested the rule. Proceed to the {button} to view it.</span>;
// TODO: make these IDs a link to the rule detailed view
return (
<div className="text-neutral-900 dark:text-neutral-100">
<span>Successfully requested the rule(s) with IDs:</span>
<ul>
{data.rule_ids.map(id => (
<li key={id}>{id}</li>
))}
</ul>
<span>Proceed to the {button} to view it.</span>
</div>
);
};

return (
Expand Down
4 changes: 4 additions & 0 deletions src/component-library/pages/legacy/DID/PageDID.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import {
} from '@/lib/infrastructure/data/view-model/did';
import { HTTPRequest } from '@/lib/sdk/http';
import { DIDMetaView } from '@/component-library/pages/legacy/DID/DIDMetaView';
import { InfoField } from '@/component-library/features/fields/InfoField';

export interface PageDIDPageProps {
didMeta: DIDMetaViewModel;
Expand Down Expand Up @@ -92,6 +93,9 @@ export const PageDID = (props: PageDIDPageProps) => {
};
return (
<div className={twMerge('flex flex-col space-y-2 w-full')}>
<InfoField>
<span>This page is currently in development and has not been optimized yet. We are working on improvements, so stay tuned!</span>
</InfoField>
<Heading
title="View DID"
subtitle={`For DID ${props.didMeta.scope}:${props.didMeta.name}`}
Expand Down
89 changes: 37 additions & 52 deletions src/component-library/pages/legacy/Layout/Layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,53 +37,44 @@ export const Layout = (props: { children: React.ReactNode; LVM: LayoutViewModel

const NavBar: React.FC = () => {
return (
<nav className="bg-gray-800 p-0 m-0 w-max">
<nav className="text-neutral-900 dark:text-neutral-100 p-0 m-0 w-max">
<div className="container mx-0 w-max flex ">
<ul className="flex space-x-5 md:flex-row flex-col">
<li className="group relative self-center">
<HeaderLinks
href="/dashboard"
className="w-max bg-neutral-800 text-text-100 px-2 py-2 hover:text-brand-500 text-left align-middle"
>
<HeaderLinks href="/dashboard" className="w-max px-2 py-2 hover:text-brand-500 text-left align-middle">
Dashboard
</HeaderLinks>
</li>
<li className="group relative self-center">
<HeaderLinks href="/did/list" className="w-max text-text-100 bg-neutral-800 px-2 py-2 hover:text-brand-500 text-left">
<HeaderLinks href="/did/list" className="w-max px-2 py-2 hover:text-brand-500 text-left">
DIDs
</HeaderLinks>
</li>
<li className="group relative self-center">
<HeaderLinks href="/rse/list" className="w-max text-text-100 bg-neutral-800 px-2 py-2 hover:text-brand-500 text-center ">
<HeaderLinks href="/rse/list" className="w-max px-2 py-2 hover:text-brand-500 text-center ">
RSEs
</HeaderLinks>
</li>
<li className="group relative">
<div className="group-hover:block text-text-100 bg-neutral-800 focus:outline-none px-2 py-2">
<div className="group-hover:block focus:outline-none px-2 py-2">
Rules
<div className="absolute hidden group-hover:block group-focus-within:block bg-neutral-700 mt-1 rounded shadow-lg z-10 p-1 ">
<HeaderLinks
href="/rule/create"
className="w-max pt-2 pl-1 pr-1 text-text-100 bg-neutral-700 block hover:text-brand-500 text-center"
>
<div className="absolute hidden group-hover:block group-focus-within:block bg-neutral-100 dark:bg-neutral-800 mt-1 rounded shadow-lg z-10 p-1 ">
<HeaderLinks href="/rule/create" className="w-max pt-2 pl-1 pr-1 block hover:text-brand-500 text-center">
Create Rule
</HeaderLinks>
<HeaderLinks
href="/rule/list"
className="pt-2 pb-2 pl-1 pr-1 text-text-100 bg-neutral-700 block hover:text-brand-500 text-center"
>
<HeaderLinks href="/rule/list" className="pt-2 pb-2 pl-1 pr-1 block hover:text-brand-500 text-center">
List Rules
</HeaderLinks>
</div>
</div>
</li>
<li className="group relative">
<div className="group-hover:block text-text-100 bg-neutral-800 focus:outline-none px-2 py-2">
<div className="group-hover:block focus:outline-none px-2 py-2">
...
<div className="absolute hidden group-hover:block group-focus-within:block bg-neutral-700 mt-1 rounded shadow-lg z-10 p-1">
<div className="absolute hidden group-hover:block group-focus-within:block bg-neutral-100 dark:bg-neutral-800 mt-1 rounded shadow-lg z-10 p-1">
<HeaderLinks
href="/subscription/list"
className="w-max pt-2 pb-2 pl-1 pr-1 text-text-100 bg-neutral-700 block hover:text-brand-500 text-center"
className="w-max pt-2 pb-2 pl-1 pr-1 block hover:text-brand-500 text-center"
>
Subscription
</HeaderLinks>
Expand All @@ -97,48 +88,33 @@ export const Layout = (props: { children: React.ReactNode; LVM: LayoutViewModel
};
const SideNavBar: React.FC = () => {
return (
<nav className="bg-gray-800 p-0 m-0 w-max">
<div className="container mx-0 w-max flex ">
<nav className="text-neutral-900 dark:text-neutral-100 p-0 m-0 w-max">
<div className="container mx-0 w-max flex">
<ul className="flex space-x-5 md:flex-row flex-col">
<li className="group relative">
<div className="group-hover:block text-text-100 bg-neutral-800 focus:outline-none px-2 py-2">
<div className="group-hover:block focus:outline-none px-2 py-2">
<HiMenu className="text-4xl" />
<div className="absolute hidden group-hover:block group-focus-within:block bg-neutral-700 mt-1 rounded shadow-lg z-10 p-1">
<HeaderLinks
href="/dashboard"
className="w-max pt-2 pb-2 pl-1 pr-1 text-text-100 bg-neutral-700 block hover:text-brand-500 text-center"
>
<div className="absolute hidden group-hover:block group-focus-within:block mt-1 rounded shadow-lg z-10 p-1 bg-neutral-100 dark:bg-neutral-800">
<HeaderLinks href="/dashboard" className="w-max pt-2 pb-2 pl-1 pr-1 block hover:text-brand-500 text-center">
Dashboard
</HeaderLinks>

<HeaderLinks
href="/did/list"
className="w-max pt-2 pb-2 pl-1 pr-1 text-text-100 bg-neutral-700 block hover:text-brand-500 text-center"
>
<HeaderLinks href="/did/list" className="w-max pt-2 pb-2 pl-1 pr-1 block hover:text-brand-500 text-center">
DIDs
</HeaderLinks>

<HeaderLinks
href="/rse/list"
className="w-max pt-2 pb-2 pl-1 pr-1 text-text-100 bg-neutral-700 block hover:text-brand-500 text-center"
>
<HeaderLinks href="/rse/list" className="w-max pt-2 pb-2 pl-1 pr-1 block hover:text-brand-500 text-center">
RSEs
</HeaderLinks>
<HeaderLinks
href="/rule/create"
className="w-max pt-2 pb-2 pl-1 pr-1 text-text-100 bg-neutral-700 block hover:text-brand-500 text-center"
>
<HeaderLinks href="/rule/create" className="w-max pt-2 pb-2 pl-1 pr-1 block hover:text-brand-500 text-center">
Create Rule
</HeaderLinks>
<HeaderLinks
href="/rule/list"
className="w-max pt-2 pb-2 pl-1 pr-1 text-text-100 bg-neutral-700 block hover:text-brand-500 text-center"
>
<HeaderLinks href="/rule/list" className="w-max pt-2 pb-2 pl-1 pr-1 block hover:text-brand-500 text-center">
List Rules
</HeaderLinks>
<HeaderLinks
href="/subscription/list"
className="w-max pt-2 pb-2 pl-1 pr-1 text-text-100 bg-neutral-700 block hover:text-brand-500 text-center"
className="w-max pt-2 pb-2 pl-1 pr-1 block hover:text-brand-500 text-center"
>
Subscription
</HeaderLinks>
Expand All @@ -165,17 +141,26 @@ export const Layout = (props: { children: React.ReactNode; LVM: LayoutViewModel
// images to be returned by static nextjs
return (
<div className={twMerge('dark:bg-neutral-900 bg-neutral-0', 'h-full min-h-screen', 'flex flex-col')}>
<header className={twMerge('w-full flex flex-col bg-neutral-800 space-y-2 p-2', 'md:h-16', 'z-[100]')}>
<header
className={twMerge(
'w-full flex flex-col bg-neutral-0 dark:bg-neutral-900 space-y-2 p-2',
'md:h-16',
'z-[100]',
'border border-neutral-900 dark:border-neutral-100 border-opacity-10 dark:border-opacity-10',
)}
>
<nav className="w-full h-full flex justify-between items-center">
<span className="flex md:hidden">
<SideNavBar></SideNavBar>
</span>

<span className="flex flex-row space-x-2">
<a className="bg-neutral-100 w-12 h-12 rounded" href={'//' + props.LVM.rucioProjectLink}>
<Image src="/logocropped.svg" alt="Rucio Logo" width={48} height={48} />
<span className="flex flex-row space-x-1">
<a className="w-12 h-12" href={'//' + props.LVM.rucioProjectLink}>
<Image src="/logocropped.svg" alt="Rucio Logo" width={43} height={43} />
</a>
<a className="w-12 h-12" href={'//' + props.LVM.experimentProjectLink}>
<Image src="/experiment-logo.png" alt="Experiment Logo" width={53} height={53} />
</a>
<a className="bg-brand-500 w-12 h-12" href={'//' + props.LVM.experimentProjectLink} />
</span>
<span className="hidden md:visible md:flex space-x-16 items-center pl-2 pr-2">
<Searchbar />
Expand All @@ -184,11 +169,11 @@ export const Layout = (props: { children: React.ReactNode; LVM: LayoutViewModel

<span className="flex space-x-1 items-end relative pl-2 pr-2">
<button
className="text-text-100 hover:text-brand-500 flex items-center"
className="text-neutral-900 dark:text-neutral-100 hover:text-brand-500 flex items-center"
onClick={() => setIsProfileOpen(!isProfileOpen)}
ref={accountMenuButtonRef}
>
<HiUserCircle className="text-4xl" />
<HiUserCircle className="text-3xl" />
<HiChevronDown className="hidden md:inline" />
</button>
<AccountDropdown
Expand Down
8 changes: 5 additions & 3 deletions src/component-library/pages/legacy/Layout/Searchbar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, { forwardRef, useEffect, useRef, useState } from 'react';
import { twMerge } from 'tailwind-merge';
import { useRouter } from 'next/navigation';
import { Input } from '@/component-library/atoms/form/input';

type SearchLocation = {
name: string;
Expand Down Expand Up @@ -39,7 +40,9 @@ const LocationLink = (props: { onMouseDown: () => void; isHighlighted: boolean;
'w-full p-1 rounded-sm hover:cursor-pointer',
'hover:bg-neutral-200 text-text-800',
'dark:text-text-100',
props.isHighlighted ? 'dark:bg-neutral-500 hover:dark:bg-neutral-500' : 'dark:bg-neutral-800 hover:dark:bg-neutral-600',
props.isHighlighted
? 'bg-neutral-300 hover:bg-neutral-300 dark:bg-neutral-500 hover:dark:bg-neutral-500'
: 'dark:bg-neutral-800 hover:dark:bg-neutral-600',
)}
onMouseDown={props.onMouseDown}
>
Expand Down Expand Up @@ -153,8 +156,7 @@ export const Searchbar = () => {

return (
<span className="relative">
<input
className={twMerge('p-2 rounded-lg w-48 lg:w-96 bg-neutral-600 text-text-100', 'focus:bg-neutral-100 focus:text-text-900')}
<Input
placeholder="Search"
onFocus={() => setIsFocused(true)}
onBlur={() => setIsFocused(false)}
Expand Down
5 changes: 5 additions & 0 deletions src/component-library/pages/legacy/RSE/PageRSE.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ import { PageRSEAttributes } from './PageRSEAttributes';
import { H2 } from '../../../atoms/legacy/text/headings/H2/H2';
import { Body } from '@/component-library/pages/legacy/Helpers/Body';
import { Heading } from '@/component-library/pages/legacy/Helpers/Heading';
import { InfoField } from '@/component-library/features/fields/InfoField';
import React from 'react';

type PageRSEProps = {
rse: RSEViewModel;
Expand All @@ -23,6 +25,9 @@ type PageRSEProps = {
export const PageRSE = (props: PageRSEProps) => {
return (
<div className={twMerge('flex flex-col space-y-2 w-full')}>
<InfoField>
<span>This page is currently in development. We are working on improvements, so stay tuned!</span>
</InfoField>
<Heading title="View RSE" subtitle={`For RSE ${props.rse.name}`}>
<div
className={twMerge(
Expand Down
Loading

0 comments on commit 56aedf1

Please sign in to comment.