Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FEAT-1092]: Update color names and box-shadows to match Design-System #1143

Merged
Prev Previous commit
Next Next commit
fix: update tailwind config and class-names
umrkhn committed Nov 6, 2023

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
commit 5c3f7b5f4b5a950b27cd0fa997d9cf76ad5d9bf3
2 changes: 1 addition & 1 deletion dashboard/components/checkbox/Checkbox.tsx
Original file line number Diff line number Diff line change
@@ -13,7 +13,7 @@ function Checkbox({ id, checked, onChange }: CheckboxProps) {
checked={checked}
onChange={onChange}
type="checkbox"
className="bg-transparent checked:hover:border-transparent grid h-4 w-4 appearance-none place-content-center rounded border-2 border-gray-300 before:h-[1rem] before:w-[1rem] before:origin-bottom-left before:scale-0 before:shadow-[inset_1rem_1rem_#fff] before:content-[''] before:[clip-path:polygon(28%_38%,41%_53%,75%_24%,86%_38%,40%_78%,15%_50%)] checked:border-darkcyan-500 checked:bg-darkcyan-500 checked:before:scale-100 hover:border-gray-400 checked:hover:bg-darkcyan-700"
className="grid h-4 w-4 appearance-none place-content-center rounded border-2 border-gray-300 bg-transparent before:h-[1rem] before:w-[1rem] before:origin-bottom-left before:scale-0 before:shadow-[inset_1rem_1rem_#fff] before:content-[''] before:[clip-path:polygon(28%_38%,41%_53%,75%_24%,86%_38%,40%_78%,15%_50%)] checked:border-darkcyan-500 checked:bg-darkcyan-500 checked:before:scale-100 hover:border-gray-400 checked:hover:border-transparent checked:hover:bg-darkcyan-700"
/>
);
}
Original file line number Diff line number Diff line change
@@ -48,7 +48,7 @@ export default function InventoryFilterDropdown({
{/* Dropdown transparent backdrop */}
<div
onClick={toggle}
className="bg-transparent fixed left-0 top-0 z-20 hidden h-screen w-screen animate-fade-in opacity-0 sm:block"
className="fixed left-0 top-0 z-20 hidden h-screen w-screen animate-fade-in bg-transparent opacity-0 sm:block"
></div>
<div
className={`absolute ${position} z-[21] inline-flex min-w-[16rem] max-w-[21rem] rounded-lg bg-white p-4 text-sm shadow-right`}
Original file line number Diff line number Diff line change
@@ -48,7 +48,7 @@ export default function InventoryFilterDropdown({
{/* Dropdown transparent backdrop */}
<div
onClick={toggle}
className="bg-transparent fixed left-0 top-0 z-20 hidden h-screen w-screen animate-fade-in opacity-0 sm:block"
className="fixed left-0 top-0 z-20 hidden h-screen w-screen animate-fade-in bg-transparent opacity-0 sm:block"
></div>
<div
className={`absolute ${position} z-[21] inline-flex min-w-[16rem] max-w-[21rem] rounded-lg bg-white p-4 text-sm shadow-right`}
Original file line number Diff line number Diff line change
@@ -86,7 +86,7 @@ function InventoryViewHeader({
<>
<div
onClick={closeDropdown}
className="bg-transparent fixed inset-0 z-20 hidden animate-fade-in opacity-0 sm:block"
className="fixed inset-0 z-20 hidden animate-fade-in bg-transparent opacity-0 sm:block"
></div>
<div className="absolute left-0 top-10 z-[21] inline-flex w-[16rem] rounded-lg bg-white p-4 text-sm shadow-right">
<div className="flex w-full flex-col gap-1">
Original file line number Diff line number Diff line change
@@ -248,7 +248,7 @@ function InventoryViewAlertsCreateOrEditAlert({
</div>
</div>
<span
className={`bg-transparent absolute right-4 top-1/2 flex w-full -translate-y-1/2 transform cursor-pointer items-center gap-2 rounded text-sm font-medium text-darkcyan-500 text-darkcyan-500 active:bg-cyan-200 active:text-darkcyan-500 disabled:cursor-not-allowed sm:w-auto ${
className={`absolute right-4 top-1/2 flex w-full -translate-y-1/2 transform cursor-pointer items-center gap-2 rounded bg-transparent text-sm font-medium text-darkcyan-500 text-darkcyan-500 active:bg-cyan-200 active:text-darkcyan-500 disabled:cursor-not-allowed sm:w-auto ${
testingEndpoint ? 'pointer-events-none opacity-50' : ''
}`}
onClick={testEndpoint}
2 changes: 1 addition & 1 deletion dashboard/components/onboarding-wizard/SelectInput.tsx
Original file line number Diff line number Diff line change
@@ -63,7 +63,7 @@ function SelectInput({
<>
<div
onClick={toggle}
className="bg-transparent fixed inset-0 z-20 hidden animate-fade-in opacity-0 sm:block"
className="fixed inset-0 z-20 hidden animate-fade-in bg-transparent opacity-0 sm:block"
></div>
<div className="absolute top-[96px] z-[21] max-h-52 w-full overflow-hidden overflow-y-auto rounded-lg border border-gray-100 bg-white px-3 py-2 shadow-right">
<div className="flex w-full flex-col gap-1">
4 changes: 2 additions & 2 deletions dashboard/components/select-checkbox/SelectCheckbox.tsx
Original file line number Diff line number Diff line change
@@ -76,7 +76,7 @@ function SelectCheckbox({
isOpen ? 'outline-2 outline-darkcyan-500' : 'outline-gray-300'
}`}
>
<div className="from-transparent absolute right-0 top-1 h-[50px] w-6 bg-gradient-to-r via-white to-white"></div>
<div className="absolute right-0 top-1 h-[50px] w-6 bg-gradient-to-r from-transparent via-white to-white"></div>
<span className="pointer-events-none absolute bottom-[1.925rem] left-4 origin-left scale-75 select-none font-normal text-gray-500">
{label}
</span>
@@ -104,7 +104,7 @@ function SelectCheckbox({
<div
data-testid="overlay"
onClick={toggle}
className="bg-transparent fixed inset-0 z-20 hidden animate-fade-in opacity-0 sm:block"
className="fixed inset-0 z-20 hidden animate-fade-in bg-transparent opacity-0 sm:block"
></div>
<div className="absolute top-[4.15rem] z-[21] w-full rounded-lg border border-gray-50 bg-white shadow-right">
<div className="relative m-4 ">
2 changes: 1 addition & 1 deletion dashboard/components/select/Select.tsx
Original file line number Diff line number Diff line change
@@ -52,7 +52,7 @@ function Select({
<>
<div
onClick={toggle}
className="bg-transparent fixed inset-0 z-20 hidden animate-fade-in opacity-0 sm:block"
className="fixed inset-0 z-20 hidden animate-fade-in bg-transparent opacity-0 sm:block"
></div>
<div className="absolute top-[66px] z-[21] max-h-52 w-full overflow-hidden overflow-y-auto rounded-lg border border-gray-100 bg-white px-3 py-2 shadow-right">
<div className="flex w-full flex-col gap-1">
56 changes: 28 additions & 28 deletions dashboard/pages/onboarding/cloud-accounts/index.tsx
Original file line number Diff line number Diff line change
@@ -64,7 +64,7 @@ export default function CloudAccounts() {
<div className="mb-4 space-y-4">
<Link
href={'/onboarding/choose-cloud/'}
className="bg-transparent flex w-full items-center rounded border-[1.5px] border-darkcyan-500 p-6 text-darkcyan-500 hover:bg-darkcyan-100"
className="flex w-full items-center rounded border-[1.5px] border-darkcyan-500 bg-transparent p-6 text-darkcyan-500 hover:bg-darkcyan-100"
>
<PlusIcon className="my-4 ml-2 mr-6 h-6 w-6" />
Add cloud account
@@ -108,16 +108,16 @@ export default function CloudAccounts() {
<RightSideLayout isCustom={true} customClasses="flex flex-col p-4">
<div className="grid w-full grid-cols-7 gap-3">
{/* Row 1 */}
<div className="bg-transparent aspect-square h-full w-full rounded-lg"></div>
<div className="bg-transparent aspect-square h-full w-full rounded-lg"></div>
<div className="bg-transparent aspect-square h-full w-full rounded-lg"></div>
<div className="bg-transparent aspect-square h-full w-full rounded-lg"></div>
<div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
<div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
<div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
<div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
<div className="aspect-square h-full w-full rounded-lg bg-cyan-300"></div>
<div className="bg-transparent aspect-square h-full w-full rounded-lg"></div>
<div className="bg-transparent aspect-square h-full w-full rounded-lg"></div>
<div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
<div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>

{/* Row 2 */}
<div className="bg-transparent aspect-square h-full w-full rounded-lg"></div>
<div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
<div className="aspect-square h-full w-full rounded-lg bg-cyan-200"></div>
<div className="aspect-square h-full w-full rounded-lg bg-cyan-200">
<div className="relative bottom-3 left-3 h-full w-full scale-110 overflow-clip rounded-lg shadow-right">
@@ -126,8 +126,8 @@ export default function CloudAccounts() {
</div>
<div className="aspect-square h-full w-full rounded-lg bg-cyan-200"></div>
<div className="aspect-square h-full w-full rounded-lg bg-cyan-200"></div>
<div className="bg-transparent aspect-square h-full w-full rounded-lg"></div>
<div className="bg-transparent aspect-square h-full w-full rounded-lg"></div>
<div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
<div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>

{/* Row 3 */}
<div className="aspect-square h-full w-full rounded-lg bg-cyan-200"></div>
@@ -138,22 +138,22 @@ export default function CloudAccounts() {
</div>
<div className="aspect-square h-full w-full rounded-lg bg-cyan-200"></div>
<div className="aspect-square h-full w-full rounded-lg bg-cyan-200"></div>
<div className="bg-transparent aspect-square h-full w-full rounded-lg"></div>
<div className="bg-transparent aspect-square h-full w-full rounded-lg"></div>
<div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
<div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
<div className="aspect-square h-full w-full rounded-lg bg-cyan-400"></div>

{/* Row 4 */}
<div className="bg-transparent aspect-square h-full w-full rounded-lg"></div>
<div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
<div className="aspect-square h-full w-full rounded-lg bg-cyan-200"></div>
<div className="aspect-square h-full w-full rounded-lg bg-cyan-400">
<div className="relative h-full w-full overflow-clip rounded-lg bg-white shadow-right">
<Avatar avatarName="gcp" />
</div>
</div>
<div className="bg-transparent aspect-square h-full w-full rounded-lg"></div>
<div className="bg-transparent aspect-square h-full w-full rounded-lg"></div>
<div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
<div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
<div className="aspect-square h-full w-full rounded-lg bg-cyan-200"></div>
<div className="bg-transparent aspect-square h-full w-full rounded-lg"></div>
<div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>

{/* Row 5 */}
<div className="aspect-square h-full w-full rounded-lg bg-cyan-200"></div>
@@ -164,27 +164,27 @@ export default function CloudAccounts() {
<Avatar avatarName="azure" />
</div>
</div>
<div className="bg-transparent aspect-square h-full w-full rounded-lg"></div>
<div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
<div className="aspect-square h-full w-full rounded-lg bg-cyan-200"></div>
<div className="bg-transparent aspect-square h-full w-full rounded-lg"></div>
<div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>

{/* Row 6 */}
<div className="bg-transparent aspect-square h-full w-full rounded-lg"></div>
<div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
<div className="aspect-square h-full w-full rounded-lg bg-cyan-400"></div>
<div className="aspect-square h-full w-full rounded-lg bg-cyan-200"></div>
<div className="bg-transparent aspect-square h-full w-full rounded-lg"></div>
<div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
<div className="aspect-square h-full w-full rounded-lg bg-cyan-200"></div>
<div className="bg-transparent aspect-square h-full w-full rounded-lg"></div>
<div className="bg-transparent aspect-square h-full w-full rounded-lg"></div>
<div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
<div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>

{/* Row 7 */}
<div className="bg-transparent aspect-square h-full w-full rounded-lg"></div>
<div className="bg-transparent aspect-square h-full w-full rounded-lg"></div>
<div className="bg-transparent aspect-square h-full w-full rounded-lg"></div>
<div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
<div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
<div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
<div className="aspect-square h-full w-full rounded-lg bg-cyan-200"></div>
<div className="bg-transparent aspect-square h-full w-full rounded-lg"></div>
<div className="bg-transparent aspect-square h-full w-full rounded-lg"></div>
<div className="bg-transparent aspect-square h-full w-full rounded-lg"></div>
<div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
<div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
<div className="aspect-square h-full w-full rounded-lg bg-transparent"></div>
</div>
</RightSideLayout>
</OnboardingWizardLayout>
3 changes: 3 additions & 0 deletions dashboard/tailwind.config.js
Original file line number Diff line number Diff line change
@@ -7,6 +7,9 @@ module.exports = {
],
theme: {
colors: {
inherit: 'inherit',
transparent: 'transparent',
current: 'currentColor',
black: '#000000',
white: '#FFFFFF',
cyan: {