codeflash-admin/codeflash-internal
1
0
Fork 0
mirror of https://github.com/codeflash-ai/codeflash-internal.git synced 2026-05-04 18:25:18 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Lots of small layout tweaks, making wrapping responsive

Browse source
This commit is contained in:
afik.cohen 2024-06-14 17:35:43 -07:00
parent f2fc9e5c59
commit e8c9165cd1
3 changed files with 26 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
js/cf-webapp/src/app/onboarding/CfCheckbox.tsx
View file

@ -17,7 +17,7 @@ export default function CfCheckbox({
<div className={`flex items-start justify-start pt-[9.3px] ${className}`}>
<label
htmlFor={id}
className={`flex flex-wrap items-center gap-x-2 gap-y-2 min-[1430px]:flex-nowrap ${containerStyle} cursor-pointer`}
className={`flex flex-wrap items-center gap-x-2 gap-y-2 ${containerStyle} cursor-pointer`}
>
<input
type="checkbox"
@ -28,8 +28,8 @@ export default function CfCheckbox({
/>
<div className="flex h-4 w-4 flex-shrink-0 flex-col items-center rounded-sm border border-solid border-white/10 bg-white/5">
{isChecked && (
<div className="flex h-4 w-4 flex-shrink-0 flex-col items-center rounded-sm border border-solid border-white/10 bg-yellow-400 p-[1.7px]">
<CheckmarkIcon className="h-[11px] w-[11px] flex-shrink-0" />
<div className="flex h-4 w-4 flex-shrink-0 flex-col items-center rounded-sm border border-solid border-white/10 bg-yellow-400 ">
<CheckmarkIcon className="h-[12px] w-[12px] flex-shrink-0" />
</div>
)}
</div>

39
js/cf-webapp/src/app/onboarding/MainContent.tsx
View file

@ -21,26 +21,32 @@ export default function MainContent({ className = "" }: MainContentProps) {
return (
<div
className={`font-inter z-[3] flex flex-col justify-end gap-y-[2.7px] rounded-sm border border-solid border-white bg-[radial-gradient(#FAFAFA1F,_#F6F6F600)] px-8 pb-8 pt-20 text-sm
leading-5 tracking-[0px] backdrop-blur-md ${className}`}
className={`font-inter z-[3] flex flex-wrap rounded-sm border border-solid border-white bg-[radial-gradient(#FAFAFA1F,_#F6F6F600)] px-8 pb-8 pt-20 text-base
leading-5 backdrop-blur-md ${className}`}
>
<div className="flex flex-wrap items-start justify-center gap-x-24 gap-y-11 min-[1430px]:flex-nowrap">
<div className="flex flex-col gap-y-16 self-stretch">
<div id="welcometext" className="flex flex-wrap items-start justify-start px-4 mr-4">
<div className="flex flex-col gap-y-8 self-stretch">
<div className="flex items-center gap-x-[11px]">
<LogoIcon className="h-8 w-12 flex-shrink-0" />
<LogoText className="mb-[2.9px] h-5 w-36" />
</div>
<h1 className="text-center text-[28px] font-semibold leading-8 tracking-[-0.16px] text-white">
Welcome to Codeflash!
</h1>
<h1 className="text-[28px] font-semibold leading-8 text-white">Welcome to Codeflash!</h1>
<div className="flex text-white items-center text-xl font-light leading-5 mb-8">
Ready to upgrade your codebase?
</div>
</div>
</div>
<div
id="questions"
className="flex flex-col items-start justify-start text-white gap-y-6 px-4"
>
<div className="flex flex-col items-start gap-y-2">
<label className="text-white" htmlFor="email-input">
<label className="text-white text-base" htmlFor="email-input">
What email do you want to use for Codeflash?
</label>
<div className="flex w-[368px] items-center self-stretch rounded-sm border border-solid border-white/10 bg-white/5 px-[11px] py-[7px] focus-within:[box-shadow:0_0_4px_#1e40af]">
<div className="flex items-center self-stretch rounded-sm border border-solid border-white/10 bg-white/5 px-[11px] py-[7px] focus-within:[box-shadow:0_0_4px_#1e40af]">
<input
className="font-source_code_pro flex-grow leading-tight text-stone-400 [min-width:0] [outline:none] placeholder:text-[#B6AFAF]"
className="font-source_code_pro flex-grow leading-tight text-stone-400 [outline:none] placeholder:text-[#B6AFAF]"
placeholder="Enter email here"
id="email-input"
type="text"
@ -54,13 +60,8 @@ export default function MainContent({ className = "" }: MainContentProps) {
This field must be filled in
</label>
</div>
</div>
<div className="flex flex-wrap items-end justify-center gap-x-[87px] gap-y-[5.3px] pb-[9.3px] pt-1 text-white min-[1430px]:flex-nowrap">
<div className="flex h-[11px] items-center pb-[-9.32px] text-xl font-light leading-5">
Ready to upgrade your codebase?
</div>
<div className="w-96 flex-shrink-0 self-stretch">
<label htmlFor="custom-option-input">
<div className="flex flex-col items-start gap-y-2">
<label className="text-base" htmlFor="custom-option-input">
What’s your #1 pain point when it comes to code quality and optimization?
</label>
@ -80,7 +81,7 @@ export default function MainContent({ className = "" }: MainContentProps) {
<div className="text-white/60">We waste money running inefficient code.</div>
</CfCheckbox>
<CfCheckbox id="checkbox-5" containerStyle="pr-4">
<div className="w-[324px] rounded-sm border border-solid border-white/10 bg-white/5 px-[11px] py-[7px] focus-within:[box-shadow:0_0_4px_#1e40af]">
<div className="min-w-[324px] rounded-sm border border-solid border-white/10 bg-white/5 px-[11px] py-[7px] focus-within:[box-shadow:0_0_4px_#1e40af]">
<input
className="font-source_code_pro w-full leading-tight text-stone-400 [min-width:0] [outline:none] placeholder:text-[#B6AFAF]"
placeholder="Other pain point..."
@ -96,7 +97,7 @@ export default function MainContent({ className = "" }: MainContentProps) {
</div>
</div>
</div>
<div className="flex items-end justify-end pt-10">
<div id="continuebutton" className="flex items-end justify-end mt-auto pt-10 w-full">
<div className="flex items-center justify-center">
<LeftArrowIcon className="h-10 w-8 flex-shrink-0" />
<button

3
js/cf-webapp/tailwind.config.js
View file

@ -26,6 +26,9 @@ module.exports = {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
yellow: {
400: "#FFC043",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",