Skip to content

Commit

Permalink
fix(ui): update callout, search, navigation-left components (#1748)
Browse files Browse the repository at this point in the history
* fix(ui): update callout, search, navigation-left components

* revert: update heading size
  • Loading branch information
RemiBonnet authored Nov 13, 2024
1 parent 678de91 commit 8f737ed
Show file tree
Hide file tree
Showing 48 changed files with 121 additions and 95 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -214,11 +214,11 @@ exports[`ClusterDeleteModal should match snapshot 1`] = `
</div>
</div>
<div
class="flex flex-row gap-x-3 p-3 border rounded border-yellow-600 bg-yellow-50 text-yellow-700 mt-3 text-xs"
class="flex flex-row gap-x-3 p-3 border rounded text-sm border-yellow-600 bg-yellow-50 text-yellow-700 mt-3"
data-accent-color="yellow"
>
<div
class="-order-2 text-base leading-6"
class="-order-2 text-lg leading-6"
>
<i
aria-hidden="true"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,7 @@ export function ClusterDeleteModal({ cluster }: ClusterDeleteModalProps) {
</label>
</div>
{cluster.is_demo && (
<Callout.Root className="mt-3 text-xs" color="sky">
<Callout.Root className="mt-3" color="sky">
<Callout.Icon>
<Icon iconName="info-circle" iconStyle="regular" />
</Callout.Icon>
Expand Down Expand Up @@ -220,7 +220,7 @@ export function ClusterDeleteModal({ cluster }: ClusterDeleteModalProps) {
)}
</div>
{kubernetes !== 'SELF_MANAGED' && clusterDeleteMode !== ClusterDeleteMode.DELETE_QOVERY_CONFIG && (
<Callout.Root className="mt-3 text-xs" color="yellow">
<Callout.Root className="mt-3" color="yellow">
<Callout.Icon>
<Icon iconName="triangle-exclamation" iconStyle="regular" />
</Callout.Icon>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export function ClusterInstallationGuideModal({ type, onClose, ...props }: Clust
<Callout.Icon>
<Icon iconName="circle-info" iconStyle="regular" />
</Callout.Icon>
<Callout.Text className="text-xs">
<Callout.Text>
This cluster has been created via Qovery CLI.
<br />
Please use the Qovery CLI to manage any upgrade or modification for this cluster.
Expand Down Expand Up @@ -98,7 +98,7 @@ export function ClusterInstallationGuideModal({ type, onClose, ...props }: Clust
<Callout.Icon>
<Icon iconName="circle-info" iconStyle="regular" />
</Callout.Icon>
<Callout.Text className="text-xs">
<Callout.Text>
Note: You can access again this installation guide and the configuration file by opening the “Installation
guide” section from the cluster menu
</Callout.Text>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ exports[`ClusterSetup should match manage deployment snapshot 1`] = `
<body>
<div>
<div
class="flex flex-row gap-x-3 p-3 border rounded border-sky-500 bg-sky-50 text-sky-500 text-sm"
class="flex flex-row gap-x-3 p-3 border rounded text-sm border-sky-500 bg-sky-50 text-sky-500"
data-accent-color="sky"
>
<div
class="-order-2 text-base leading-6"
class="-order-2 text-lg leading-6"
>
<i
aria-hidden="true"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export function ClusterSetup({ type }: { type: 'LOCAL_DEMO' | 'SELF_MANAGED' })
return (
<>
{type === 'SELF_MANAGED' && (
<Callout.Root className="text-sm" color="sky">
<Callout.Root color="sky">
<Callout.Icon>
<Icon iconName="info-circle" iconStyle="regular" />
</Callout.Icon>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@ export function DockerfileSettings({
<Callout.Icon>
<Icon iconName="circle-info" iconStyle="regular" />
</Callout.Icon>
<Callout.Text className="text-xs">
<Callout.Text>
Qovery provides a default Dockerfile and job parameters to deploy your template. These can be
customize based on your needs (additional arguments in the CLI commands etc..).
</Callout.Text>
Expand All @@ -157,7 +157,7 @@ export function DockerfileSettings({
<Callout.Icon>
<Icon iconName="circle-info" iconStyle="regular" />
</Callout.Icon>
<Callout.Text className="text-xs">
<Callout.Text>
Qovery provides a default Dockerfile and job parameters to deploy your manifest. These can be
customize based on your needs (additional arguments in the CLI commands etc..).
</Callout.Text>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ exports[`PodStatusesCallout should render successfully 1`] = `
data-accent-color="red"
>
<div
class="-order-2 text-base leading-6"
class="-order-2 text-lg leading-6"
>
<span
class="icon-solid-circle-exclamation shrink-0 "
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ function ConfirmationModal({
</Callout.Icon>
<Callout.Text>
<Callout.TextHeading>Some services will not be impacted:</Callout.TextHeading>
<Callout.TextDescription className="text-xs">
<Callout.TextDescription>
<ul className="list-disc pl-4">
{selectedRows
.filter(({ id: selectedId }) => !impactedRows.find(({ id }) => id === selectedId))
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export function FlowCreateVariable({
<Callout.Icon>
<Icon iconName="circle-info" iconStyle="regular" />
</Callout.Icon>
<Callout.Text className="text-xs">
<Callout.Text>
Some environment variable are proposed by default to match the default Dockerfile provided in the
previous step.
</Callout.Text>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -41,14 +41,14 @@ exports[`VariableList should match snapshot 1`] = `
class="absolute -right-9 top-[7px]"
>
<span
class="relative"
class="group relative"
>
<i
aria-hidden="true"
class="fa-solid fa-magnifying-glass absolute left-2 top-1/2 block -translate-y-1/2 text-xs text-neutral-400"
class="fa-solid fa-magnifying-glass absolute left-2 top-1/2 block -translate-y-1/2 text-xs text-neutral-350 transition-colors group-hover:text-neutral-400"
/>
<input
class="w-36 rounded border border-neutral-300 py-1.5 pl-7 outline-0 placeholder:text-neutral-350"
class="w-36 rounded border border-neutral-250 py-1.5 pl-7 outline-0 transition-colors placeholder:text-neutral-350 group-hover:border-neutral-350"
placeholder="Search"
value=""
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export function PageSettingsDomainsFeature() {
warning: (
<>
<Callout.TextHeading>Domain migration - read this!</Callout.TextHeading>
<Callout.TextDescription className="text-xs">
<Callout.TextDescription>
If you are in a migration process and want to assign this domain to another application, make sure you
deploy first this application to ensure that every configuration is cleaned up.
</Callout.TextDescription>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ export function PageSettingsValuesOverrideFileFeature() {
<>
<GitPublicRepositorySettings hideRootPath />
<GitPathsSettings methods={methods} />
<Callout.Root color="sky" className="items-center text-xs">
<Callout.Root color="sky" className="items-center">
<Callout.Icon>
<Icon iconName="info-circle" iconStyle="regular" />
</Callout.Icon>
Expand Down Expand Up @@ -174,7 +174,7 @@ export function PageSettingsValuesOverrideFileFeature() {
<Icon iconName="circle-info" iconStyle="regular" />
</Callout.Icon>

<Callout.Text className="text-xs">
<Callout.Text>
<Callout.TextHeading>Auto-deploy is activated</Callout.TextHeading>
The service will be automatically updated on every new commit on the branch.
</Callout.Text>
Expand All @@ -184,7 +184,7 @@ export function PageSettingsValuesOverrideFileFeature() {
<Callout.Icon>
<Icon iconName="circle-info" iconStyle="regular" />
</Callout.Icon>
<Callout.Text className="text-xs">
<Callout.Text>
<Callout.TextHeading>Auto-deploy is not activated</Callout.TextHeading>
</Callout.Text>
</Callout.Root>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -221,7 +221,7 @@ export function PageSettingsGeneral({
<DeploymentSetting />
{watchFieldProvider === 'GIT' && <AutoDeploySetting source="GIT" />}
{watchFieldProvider === 'HELM_REPOSITORY' && (
<Callout.Root color="sky" className="mt-5 items-center text-xs">
<Callout.Root color="sky" className="mt-5 items-center">
<Callout.Icon>
<Icon iconName="circle-info" iconStyle="regular" />
</Callout.Icon>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export function PageSettingsHealthchecks({
<Callout.Icon>
<Icon iconName="triangle-exclamation" iconStyle="regular" />
</Callout.Icon>
<Callout.Text className="text-xs">
<Callout.Text>
Your service is configured to run with a minimum of one instance, setting the health checks will not
ensure the service high availability during a cluster upgrade. Have a look at your{' '}
<Link to={linkResourcesSetting} size="xs">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ exports[`PageSettingsResources should render warning box and icon for cpu 1`] =
data-testid="banner-box"
>
<div
class="-order-2 text-base leading-6"
class="-order-2 text-lg leading-6"
>
<i
aria-hidden="true"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export function PageSettings(props: PageSettingsProps) {
return (
<div className="flex flex-grow">
<div className="relative w-72 shrink-0 border-r border-neutral-200 pb-10">
<NavigationLeft className="sticky top-14 pt-6" links={links} />
<NavigationLeft className="sticky top-14 pt-5" links={links} />
</div>
<div className="flex flex-grow">
<ErrorBoundary>{children}</ErrorBoundary>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export function PageSettingsGeneral({ onSubmit, loading, cluster }: PageSettings
</Callout.Icon>
<Callout.Text>
<Callout.TextHeading>Qovery manages this resource for you</Callout.TextHeading>
<Callout.TextDescription className="text-xs">
<Callout.TextDescription>
Use exclusively the Qovery console to update the resources managed by Qovery on your cloud account.
<br /> Do not manually update or upgrade them on the cloud provider console, otherwise you will risk a
drift in the configuration.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export function PageSettings(props: PageSettingsProps) {
return (
<div className="flex flex-grow">
<div className="relative w-72 shrink-0 border-r border-neutral-200 pb-10">
<NavigationLeft className="sticky top-14 pt-6" links={links} />
<NavigationLeft className="sticky top-14 pt-5" links={links} />
</div>
<div className="flex flex-grow">
<ErrorBoundary>{children}</ErrorBoundary>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -121,9 +121,9 @@ export function AWSVpcFeature({ isKarpenter = false }: AWSVpcFeatureProps) {
callout: (
<Callout.Root color="yellow">
<Callout.Icon>
<Icon className="text-xs" iconName="exclamation-circle" iconStyle="regular" />
<Icon iconName="exclamation-circle" iconStyle="regular" />
</Callout.Icon>
<Callout.Text className="text-xs">
<Callout.Text>
<Callout.TextHeading>
You must enable auto-assign public IPv4 address in the subnets settings for EKS
</Callout.TextHeading>
Expand All @@ -139,9 +139,9 @@ export function AWSVpcFeature({ isKarpenter = false }: AWSVpcFeatureProps) {
callout: (
<Callout.Root color="yellow">
<Callout.Icon>
<Icon className="text-xs" iconName="exclamation-circle" iconStyle="regular" />
<Icon iconName="exclamation-circle" iconStyle="regular" />
</Callout.Icon>
<Callout.Text className="text-xs">
<Callout.Text>
<Callout.TextHeading>
These subnets have to be private and connected to internet through a NAT Gateway
</Callout.TextHeading>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,9 @@ export function StepFeatures(props: StepFeaturesProps) {
<div className="mb-10">
<Callout.Root className="mb-4" color="yellow">
<Callout.Icon>
<Icon className="text-xs" iconName="triangle-exclamation" iconStyle="regular" />
<Icon iconName="triangle-exclamation" iconStyle="regular" />
</Callout.Icon>
<Callout.Text className="text-xs">
<Callout.Text>
<Callout.TextHeading>Choose wisely</Callout.TextHeading>
<Callout.TextDescription>
These features will not be modifiable after cluster creation.
Expand Down Expand Up @@ -81,9 +81,9 @@ export function StepFeatures(props: StepFeaturesProps) {
{feature.id === 'STATIC_IP' && (
<Callout.Root color="yellow" className="mt-4">
<Callout.Icon>
<Icon className="text-xs" iconName="triangle-exclamation" iconStyle="regular" />
<Icon iconName="triangle-exclamation" iconStyle="regular" />
</Callout.Icon>
<Callout.Text className="text-xs">
<Callout.Text>
<Callout.TextHeading>Warning</Callout.TextHeading>
<Callout.TextDescription>
This feature has been activated by default. Since February 1, 2024, AWS charge public
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ export function StepGeneral(props: StepGeneralProps) {
<Callout.Icon>
<Icon iconName="triangle-exclamation" iconStyle="regular" />
</Callout.Icon>
<Callout.Text className="text-xs">
<Callout.Text>
GCP integration is beta, keep an eye on your cluster costs and report any bugs and/or weird
behavior.
<ExternalLink
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ export function StepSummary(props: StepSummaryProps) {
</Callout.Icon>
<Callout.Text>
<Callout.TextHeading>Qovery manages this resource for you</Callout.TextHeading>
<Callout.TextDescription className="text-xs">
<Callout.TextDescription>
Use exclusively the Qovery console to update the resources managed by Qovery on your cloud account.
<br /> Do not manually update or upgrade them on the cloud provider console, otherwise you will risk a
drift in the configuration.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ export function PageSettingsGeneral({
</Callout.Icon>
<Callout.Text>
<Callout.TextHeading>Qovery manages this resource for you </Callout.TextHeading>
<Callout.TextDescription className="text-xs">
<Callout.TextDescription>
Use exclusively the Qovery console to update the resources managed by Qovery on your cloud account.
<br /> Do not manually update or upgrade them on the cloud provider console, otherwise you will risk a
drift in the configuration. <br />
Expand Down Expand Up @@ -144,7 +144,7 @@ export function PageSettingsGeneral({
<Callout.Icon>
<Icon iconName="circle-info" iconStyle="regular" />
</Callout.Icon>
<Callout.Text className="text-xs">
<Callout.Text>
Upgrading the version might cause service interruption. Have a look at the database
documentation before launching the upgrade.
</Callout.Text>
Expand All @@ -156,7 +156,7 @@ export function PageSettingsGeneral({
<Callout.Icon>
<Icon iconName="circle-info" />
</Callout.Icon>
<Callout.Text className="text-xs text-neutral-350">
<Callout.Text className="text-neutral-350">
Once triggered, the update will be managed by your cloud provider and applied during the
configured maintenance window. Moreover, the operation might cause a service interruption.{' '}
<ExternalLink
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export function PageSettingsResources(props: PageSettingsResourcesProps) {
</Callout.Icon>
<Callout.Text>
<Callout.TextHeading>Qovery manages this resource for you </Callout.TextHeading>
<Callout.TextDescription className="text-xs">
<Callout.TextDescription>
Use exclusively the Qovery console to update the resources managed by Qovery on your cloud account.
<br /> Do not manually update or upgrade them on the cloud provider console, otherwise you will risk a
drift in the configuration.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export function PageSettings(props: PageSettingsProps) {
return (
<div className="flex flex-grow">
<div className="relative w-72 shrink-0 border-r border-neutral-200 pb-10">
<NavigationLeft className="sticky top-14 pt-6" links={links} />
<NavigationLeft className="sticky top-14 pt-5" links={links} />
</div>
<div className="flex flex-grow">
<ErrorBoundary>{children}</ErrorBoundary>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,14 +27,25 @@ export function SpotlightTrigger() {
return (
<>
<button
className="flex min-w-[268px] items-center gap-2 rounded border border-neutral-300 bg-white px-3 py-2 text-sm"
className="group flex min-w-[268px] items-center gap-2 rounded border border-neutral-250 bg-white px-3 py-2 text-sm transition-colors hover:border-neutral-350"
onClick={() => setOpenSpotlight(!openSpotlight)}
>
<Icon iconName="magnifying-glass" iconStyle="regular" className="text-neutral-400" />
<Icon
iconName="magnifying-glass"
iconStyle="regular"
className="text-neutral-350 group-hover:text-neutral-400"
/>
<span className="text-neutral-350">Search for help</span>
<div className="ml-auto flex gap-1 text-neutral-350">
<Kbd>{metaKey}</Kbd>
<Kbd>K</Kbd>
<Kbd>
<svg xmlns="http://www.w3.org/2000/svg" width="6" height="8" fill="none" viewBox="0 0 6 8">
<path
fill="#67778E"
d="M1.218.445v7.11H.275V.445zm4.292 0L2.556 3.761.896 5.484.739 4.48l1.25-1.377L4.377.445zm-.908 7.11L1.97 4.088l.561-.747 3.194 4.214z"
></path>
</svg>
</Kbd>
</div>
</button>
<Spotlight organizationId={organizationId} open={openSpotlight} onOpenChange={setOpenSpotlight} />
Expand Down
Loading

0 comments on commit 8f737ed

Please sign in to comment.