Skip to content

Commit

Permalink
refactor(layout): update color-palette and layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@gokhangunduz
gokhangunduz committed Dec 8, 2023
1 parent c608d39 commit 7d9e60d
Show file tree
Hide file tree
Showing 144 changed files with 666 additions and 813 deletions.
445 changes: 190 additions & 255 deletions public/css/style.css
View file

Large diffs are not rendered by default.

7 changes: 5 additions & 2 deletions public/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
Expand Down Expand Up @@ -32,7 +32,10 @@
}
</script>
</head>
<body class="bg-layer-light-bg" style="font-family: 'Inter', sans-serif">
<body
class="bg-secondary-50/30"
style="font-family: &quot;Inter&quot;, sans-serif"
>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
Expand Down
6 changes: 3 additions & 3 deletions src/components/Accordion/Accordion.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,11 @@ export default function Accordion({
<Collapsible
triggerDisabled
open={isOpen === id ? true : false}
className="rounded border border-layer-light-100 bg-layer-light-50 shadow"
openedClassName="bg-layer-light-50 rounded shadow"
className="border-light-100 bg-light-50 rounded border shadow"
openedClassName="bg-light-50 rounded shadow"
trigger={
<div className="flex h-11 w-full items-center justify-between p-2">
<div className="w-full text-sm text-layer-dark-700">{header}</div>
<div className="text-light-700 w-full text-sm">{header}</div>
<div
className={`px-3 transition-all duration-200 hover:scale-110 ${
!isOpen ? "rotate-90" : "rotate-0"
Expand Down
6 changes: 3 additions & 3 deletions src/components/Accordion/AccordionV2.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,14 +23,14 @@ export default function Accordion({
<Collapsible
triggerDisabled
open={isOpen}
className={`animate__animated animate__fadeIn rounded border border-layer-primary-200 bg-layer-light-50 shadow transition-all duration-500 ${className}`}
openedClassName={`bg-layer-light-50 rounded-md border border-layer-primary-200 !shadow ${className}`}
className={`animate__animated animate__fadeIn bg-light-50 border-primary-200 rounded border shadow transition-all duration-500 ${className}`}
openedClassName={`bg-light-50 rounded-md border border-primary-200 !shadow ${className}`}
trigger={
<div
className="h-13 flex w-full !cursor-pointer items-center justify-between p-4"
onClick={() => handleOpen()}
>
<div className="w-full text-sm text-layer-dark-700">{header}</div>
<div className="text-light-700 w-full text-sm">{header}</div>
<div
className={`px-3 transition-all duration-200 hover:scale-110 ${
isOpen ? "rotate-90" : "rotate-0"
Expand Down
8 changes: 4 additions & 4 deletions src/components/ActivitiesWidget/ActivitiesWidget.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export default function ActivitiesWidget({
dataTut="robot-activities-widget"
title={`Acitivities`}
subtitle={`Last Activities`}
icon={<VscHistory size={20} className="text-layer-light-700" />}
icon={<VscHistory size={20} className="text-light-700" />}
>
<ul className="flex flex-col p-5 text-sm">
{data
Expand All @@ -56,10 +56,10 @@ export default function ActivitiesWidget({
</span>

<div className="col-span-2 justify-center">
<div className="mx-auto flex h-4 w-4 items-center justify-center rounded-full bg-layer-primary-500">
<div className="h-2 w-2 rounded-full bg-layer-light-50 " />
<div className="bg-primary-500 mx-auto flex h-4 w-4 items-center justify-center rounded-full">
<div className="bg-light-50 h-2 w-2 rounded-full " />
</div>
<div className="mx-auto h-6 w-1 bg-layer-light-200"></div>
<div className="bg-light-200 mx-auto h-6 w-1"></div>
</div>

<span className="col-span-9 text-xs font-light">
Expand Down
6 changes: 3 additions & 3 deletions src/components/AdrinActivitiesWidget/AdrinActivitiesWidget.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export default function AdrinActivitiesWidget(): ReactElement {
<WidgetLayout
title={`Acitivities`}
subtitle={`Last Activities`}
icon={<VscHistory size={20} className="text-layer-light-700" />}
icon={<VscHistory size={20} className="text-light-700" />}
>
<ul className="flex flex-col p-5 text-sm">
{adrinState?.map((item: any, index: number) => {
Expand All @@ -26,10 +26,10 @@ export default function AdrinActivitiesWidget(): ReactElement {
<div
className={`mx-auto flex h-4 w-4 items-center justify-center rounded-full ${item?.color}`}
>
<div className="h-2 w-2 rounded-full bg-layer-light-50 " />
<div className="bg-light-50 h-2 w-2 rounded-full " />
</div>
{adrinState?.length - 1 !== index && (
<div className="mx-auto h-4 w-1 bg-layer-light-200"></div>
<div className="bg-light-200 mx-auto h-4 w-1"></div>
)}
</div>
<span className="col-span-9 text-xs font-light">
Expand Down
4 changes: 2 additions & 2 deletions src/components/AdrinNetworkStatusWidget/AdrinNetworkStatusWidget.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export default function AdrinNetworkStatusWidget({
<WidgetLayout
title={`Network Status`}
subtitle={`ADriN Status`}
icon={<GiAerialSignal size={20} className="text-layer-light-700" />}
icon={<GiAerialSignal size={20} className="text-light-700" />}
>
<div className="flex h-full w-full items-center justify-around gap-4">
<img
Expand Down Expand Up @@ -124,7 +124,7 @@ export default function AdrinNetworkStatusWidget({
? "text-orange-800"
: data?.color === "bg-red-600"
? "text-red-800"
: "text-layer-light-800"
: "text-light-800"
}`}
>
{data?.description}
Expand Down
8 changes: 4 additions & 4 deletions src/components/AdrinNetworkTypes/AdrinNetworkTypes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,13 @@ export default function AdrinNetworkTypes({
<Fragment>
<div className="flex w-full gap-6">
<div className="flex w-full flex-col gap-2">
<div className="flex w-full min-w-fit flex-wrap gap-1 text-xs font-medium text-layer-light-700">
<div className="text-light-700 flex w-full min-w-fit flex-wrap gap-1 text-xs font-medium">
ADriN Regions:
<InfoTip content="ADriN Region." />
</div>
<div className="flex w-full gap-6">
<InputSelect
className="w-full text-sm text-layer-light-900"
className="text-light-900 w-full text-sm"
{...formik.getFieldProps(`adrinRegions`)}
wrapClassName="w-full"
disabled={isImportRobot || formik?.isSubmitting}
Expand All @@ -39,7 +39,7 @@ export default function AdrinNetworkTypes({
</div>

<div className="flex w-full flex-col gap-2">
<div className="flex min-w-fit flex-wrap gap-1 text-xs font-medium text-layer-light-700">
<div className="text-light-700 flex min-w-fit flex-wrap gap-1 text-xs font-medium">
Communication Profile:
<InfoTip content="ADriN Types." rightTip />
</div>
Expand All @@ -65,7 +65,7 @@ export default function AdrinNetworkTypes({

{/* Network Autoscale: */}
<div className="flex items-center gap-1 pt-2">
<div className="flex min-w-fit gap-1 text-xs font-medium text-layer-light-700">
<div className="text-light-700 flex min-w-fit gap-1 text-xs font-medium">
Network Autoscale:
<InfoTip content="Network Autoscale" />
</div>
Expand Down
6 changes: 3 additions & 3 deletions src/components/BarcodeModeToggle/BarcodeModeToggle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,20 +26,20 @@ export default function BarcodeModeToggle({
return (
<div className="absolute bottom-4 right-4 flex flex-col gap-4">
<div
className="flex h-9 w-9 cursor-pointer items-center justify-center rounded bg-layer-light-100 transition-all duration-300"
className="bg-light-100 flex h-9 w-9 cursor-pointer items-center justify-center rounded transition-all duration-300"
onClick={() => setActiveTab(activeTab === "2D" ? "3D" : "2D")}
>
{activeTab === "2D" ? "3D" : "2D"}
</div>

<div
className="flex h-9 w-9 cursor-pointer items-center justify-center rounded bg-layer-light-100 transition-all duration-300"
className="bg-light-100 flex h-9 w-9 cursor-pointer items-center justify-center rounded transition-all duration-300"
onClick={handleFullScreen.enter}
>
<BsFullscreen size={20} />
</div>
<div
className="flex h-9 w-9 cursor-pointer items-center justify-center rounded bg-layer-light-100 transition-all duration-300"
className="bg-light-100 flex h-9 w-9 cursor-pointer items-center justify-center rounded transition-all duration-300"
onClick={handleExportJSON}
>
export
Expand Down
2 changes: 1 addition & 1 deletion src/components/BugFeedbackButton/BugFeedbackButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export default function BugFeedbackButton(): ReactElement {
target="_blank"
rel="noreferrer"
href="https://forms.zohopublic.eu/robolaunch/form/robolaunchPlatformForm/formperma/wdzEXselobn0zyK7bwEtjUQNAl0pR0FakvwmP1BS7mY"
className="transition-300 rounded p-2 hover:bg-layer-light-100"
className="transition-300 hover:bg-light-100 rounded p-2"
>
<TbBug size={28} />
</a>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Button/Button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export default function Button({
type={type || "button"}
disabled={disabled}
onClick={() => (onClick ? onClick() : null)}
className={`transition-300 flex h-12 w-full items-center justify-center rounded-md bg-primary text-xs font-medium text-white hover:scale-[0.99] hover:bg-layer-primary-700 focus:ring-4 focus:ring-layer-primary-300 active:bg-purple-900 disabled:bg-layer-primary-400 ${className}`}
className={`transition-300 bg-primary-500 hover:bg-primary-700 focus:ring-primary-300 disabled:bg-primary-400 flex h-12 w-full items-center justify-center rounded-md text-xs font-medium text-white hover:scale-[0.99] focus:ring-4 active:bg-purple-900 ${className}`}
>
{loading ? (
<img
Expand Down
6 changes: 2 additions & 4 deletions src/components/CFAdvancedSettings/CFAdvancedSettings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,8 @@ export default function CFAdvancedSettings({
return (
<Accordion
id={0}
header={
<div className="text-xs text-layer-light-900">Advanced Settings</div>
}
className="rounded-md !border-layer-light-100 shadow-none"
header={<div className="text-light-900 text-xs">Advanced Settings</div>}
className="!border-light-100 rounded-md shadow-none"
isOpen={isOpen}
handleOpen={() => {
setIsOpen(!isOpen);
Expand Down
2 changes: 1 addition & 1 deletion src/components/CFCancelButton/CFCancelButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export default function CFCancelButton({
}}
disabled={disabled || false}
type="button"
className="!h-11 border border-layer-primary-700 !bg-layer-light-50 text-xs !text-layer-primary-700 transition-all duration-500 hover:!bg-layer-primary-100"
className="!bg-light-50 border-primary-700 !text-primary-700 hover:!bg-primary-100 !h-11 border text-xs transition-all duration-500"
text="Cancel"
/>
);
Expand Down
2 changes: 1 addition & 1 deletion src/components/CFGpuTypes/CFGpuTypes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ export default function CFGpuTypes({
},
)
) : (
<div className="animate__animated animate__fadeIn col-span-2 text-center text-sm font-bold text-layer-dark-100">
<div className="animate__animated animate__fadeIn text-light-100 col-span-2 text-center text-sm font-bold">
No Available GPU Types
</div>
)}
Expand Down
2 changes: 1 addition & 1 deletion src/components/CFGrantDirTags/CFGrantDirTags.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export default function CFGrantDirTag({
name="Granted directories"
classNames={{
input: "!text-xs disabled:cursor-not-allowed",
tag: "!text-xs !bg-layer-light-50 border border-layer-light-200",
tag: "!text-xs !bg-light-50 border border-light-200",
}}
placeHolder="enter a path"
beforeAddValidate={(tag) => {
Expand Down
10 changes: 5 additions & 5 deletions src/components/CFGridItem/CFGridItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,20 +17,20 @@ export default function CFGridItem({
}: ICFGridItem): ReactElement {
return (
<div
className={`transition-300 animate__animated animate__fadeIn flex items-center justify-center rounded-lg border-2 px-1 py-3 text-xs capitalize text-layer-dark-700
className={`transition-300 animate__animated animate__fadeIn text-light-700 flex items-center justify-center rounded-lg border-2 px-1 py-3 text-xs capitalize
${selected && " shadow"}
${
disabled ? "cursor-not-allowed" : "cursor-pointer hover:scale-[0.98] "
}
${
selected && disabled
? "border-layer-dark-400"
? "border-light-400"
: selected && !disabled
? "border-layer-primary-600"
? "border-primary-400"
: !selected && disabled
? "border-layer-light-200"
: "border-layer-light-200"
? "border-light-200"
: "border-light-200"
}
${className}
Expand Down
4 changes: 2 additions & 2 deletions src/components/CFHostDirectoriesInput/CFHostDirectoriesInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default function CFHostDirectoriesInput({
disabled,
}: ICFHostDirectoriesInput): ReactElement {
return (
<div className="flex w-full gap-3 rounded-md border border-layer-light-100 p-4">
<div className="border-light-100 flex w-full gap-3 rounded-md border p-4">
<FormInputText
labelName="Host Directory:"
labelInfoTip="Type a host directory."
Expand All @@ -43,7 +43,7 @@ export default function CFHostDirectoriesInput({
inputTouched={formik.touched.hostDirectories?.[index]?.mountPath}
/>

<div className="flex items-center justify-center pt-2.5 text-sm text-layer-light-800">
<div className="text-light-800 flex items-center justify-center pt-2.5 text-sm">
<CFDellButton
disabled={disabled}
onClick={() => {
Expand Down
2 changes: 1 addition & 1 deletion src/components/CFInfoBar/CFInfoBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export default function CFInfoBar({
return (
<div className={`${classNameContainer} transition-300`} data-tut={dataTut}>
<div className={`flex ${vertical && "flex-col gap-2"}`}>
<div className="flex min-w-fit gap-1 text-xs font-medium text-layer-light-700">
<div className="text-light-700 flex min-w-fit gap-1 text-xs font-medium">
{label}
<InfoTip content={tip} rightTip={rightTip} />
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/CFInputToggle/CFInputToggle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export default function CFInputToggle({
}: ICFInputToggle): ReactElement {
return (
<div data-tut={dataTut} className="flex items-center gap-1">
<div className="flex min-w-fit gap-1 text-xs font-medium text-layer-light-700">
<div className="text-light-700 flex min-w-fit gap-1 text-xs font-medium">
{labelName}
<InfoTip content={labelInfoTip} />
</div>
Expand Down
8 changes: 4 additions & 4 deletions src/components/CFLoader/CFLoader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export default function CFLoader({
src="/svg/general/loading.svg"
alt="Loading..."
/>
<span className="pb-4 text-sm text-layer-light-900">
<span className="text-light-900 pb-4 text-sm">
{loadingText ||
"Please wait while we create your robot. This may take a few minutes."}
</span>
Expand All @@ -53,7 +53,7 @@ export default function CFLoader({
return (
<div
key={index}
className="flex w-full flex-col items-center justify-center gap-3 rounded border border-layer-light-100 p-4 shadow"
className="border-light-100 flex w-full flex-col items-center justify-center gap-3 rounded border p-4 shadow"
>
<div className="flex items-center justify-center">
{item?.status === "EnvironmentReady" ||
Expand All @@ -69,10 +69,10 @@ export default function CFLoader({
</div>
{loadingItems?.length && (
<Fragment>
<span className="text-sm font-semibold text-layer-light-900">
<span className="text-light-900 text-sm font-semibold">
{item?.name}
</span>
<span className="text-sm text-layer-dark-700">
<span className="text-light-950 text-sm">
{item?.status || "Loading..."}
</span>
</Fragment>
Expand Down
2 changes: 1 addition & 1 deletion src/components/CFPersistDirTags/CFPersistDirTags.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export default function CFPersistDirTags({
name="persistent directories"
classNames={{
input: "!text-xs disabled:cursor-not-allowed",
tag: "!text-xs !bg-layer-light-50 border border-layer-light-200",
tag: "!text-xs !bg-light-50 border border-light-200",
}}
placeHolder="enter a path"
beforeAddValidate={(tag) => {
Expand Down
6 changes: 3 additions & 3 deletions src/components/CFPortInput/CFPortInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export default function CFPortInput({
type,
}: ICFPortInput): ReactElement {
return (
<div className="flex w-full gap-3 rounded-md border border-layer-light-100 p-4">
<div className="border-light-100 flex w-full gap-3 rounded-md border p-4">
<FormInputText
disabled={disabled}
labelName="Port Name:"
Expand Down Expand Up @@ -65,7 +65,7 @@ export default function CFPortInput({
classNameContainer="w-1/3"
rightTip
>
<div className="pt-2.5 text-sm text-layer-light-800">
<div className="text-light-800 pt-2.5 text-sm">
:
{
// @ts-ignore
Expand All @@ -74,7 +74,7 @@ export default function CFPortInput({
</div>
</CFInfoBar>

<div className="flex items-center justify-center pt-2.5 text-sm text-layer-light-800">
<div className="text-light-800 flex items-center justify-center pt-2.5 text-sm">
<CFDellButton
onClick={() => {
formik.setFieldValue(
Expand Down
Loading

0 comments on commit 7d9e60d

Please sign in to comment.