removed tailwind

StampyAI · May 29, 2024 · 1c52886 · 1c52886
1 parent bd231aa
commit 1c52886
Show file tree

Hide file tree

Showing 12 changed files with 217 additions and 360 deletions.
diff --git a/app/components/Article/article.css b/app/components/Article/article.css
@@ -154,11 +154,16 @@ article .link-popup p {
   gap: var(--spacing-32);
 }
 
+.form {
+  left: 845px;
+}
+
 article .footer-comtainer {
   display: flex;
   align-items: center;
   margin-top: var(--spacing-56);
   margin-bottom: var(--spacing-24);
+  gap: 16px;
 }
 article a.see-more:not(.visible) + div.see-more-contents {
   display: none;

diff --git a/app/components/Article/index.tsx b/app/components/Article/index.tsx
@@ -23,7 +23,7 @@ const ArticleFooter = (question: Question) => {
 
   return (
     !isLoading(question) && (
-      <div className="footer-comtainer padding-bottom-40 space-x-4">
+      <div className="footer-comtainer padding-bottom-40">
         {date && <div className="grey"> {`Updated ${date}`}</div>}
         <ButtonSecondaryWrapper>
           <ButtonSecondary
@@ -36,7 +36,7 @@ const ArticleFooter = (question: Question) => {
         </ButtonSecondaryWrapper>
         <Feedback
           showForm
-          formClassName="left-[845px]"
+          formClassName="form"
           pageid={question.pageid}
           onSubmit={async (message: string, option?: string) =>
             logFeedback({

diff --git a/app/components/ButtonSecondary/button_secondary.css b/app/components/ButtonSecondary/button_secondary.css
@@ -1,5 +1,10 @@
-.button-secondary .tool-tip {
-  opacity: 0;
+.button-secondary {
+  position: relative;
+  padding: 0.25rem;
+  border-radius: 6px;
+  border-width: 0;
+  line-height: 0;
+  background: inherit;
 }
 
 .button-secondary:hover .tool-tip {
@@ -13,3 +18,41 @@
 .active path {
   stroke: var(--colors-teal-600);
 }
+
+.active {
+  background-color: #edfaf9;
+}
+
+.inactive:hover {
+  background-color: #f9fafc;
+}
+
+.wrapper {
+  display: flex;
+  border-style: solid;
+  border-color: var(--colors-cool-grey-200);
+  border-width: 1px;
+  border-radius: 6px;
+  justify-content: center;
+  align-items: center;
+  padding: 7px;
+  gap: 4px;
+  min-width: min-content;
+  min-height: min-content;
+}
+
+.tool-tip {
+  opacity: 0;
+  position: absolute;
+  top: -42px;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: #1b2b3e;
+  font-size: 14px;
+  color: #f2f2f2;
+  padding: 5px 15px;
+  border-radius: 8px;
+  white-space: nowrap;
+  pointer-events: none;
+  line-height: 30px;
+}
diff --git a/app/components/ButtonSecondary/index.tsx b/app/components/ButtonSecondary/index.tsx
@@ -25,8 +25,8 @@ const ButtonSecondary = ({
       <Link
         to={action}
         className={
-          'button-secondary relative leading-7 p-1 rounded-[6px] ' +
-          (active ? 'bg-[#EDFAF9] active' : disabled ? '' : 'hover:bg-[#F9FAFC]') +
+          'button-secondary ' +
+          (active ? 'active' : disabled ? '' : 'inactive') +
           (className ? ' ' + className : '')
         }
         onClick={(e) => {
@@ -37,31 +37,23 @@ const ButtonSecondary = ({
         {...props}
       >
         {children}
-        {tooltip && !disabled && (
-          <p className="tool-tip absolute top-[-42px] left-1/2 transform -translate-x-1/2 bg-[#1B2B3E] text-[14px] text-[#f2f2f2] py-[5px] px-[15px] rounded-[8px] whitespace-nowrap pointer-events-none">
-            {tooltip}
-          </p>
-        )}
+        {tooltip && !disabled && <p className="tool-tip">{tooltip}</p>}
       </Link>
     )
   }
   return (
     <button
       className={
-        'button-secondary relative leading-7 p-1 rounded-[6px] ' +
-        (active ? 'bg-[#EDFAF9] active' : disabled ? '' : 'hover:bg-[#F9FAFC]') +
+        'button-secondary ' +
+        (active ? 'active' : disabled ? '' : 'inactive') +
         (className ? ' ' + className : '')
       }
       onClick={action}
       disabled={disabled}
       {...props}
     >
       {children}
-      {tooltip && !disabled && (
-        <p className="tool-tip absolute top-[-42px] left-1/2 transform -translate-x-1/2 bg-[#1B2B3E] text-[14px] text-[#f2f2f2] py-[5px] px-[15px] rounded-[8px] whitespace-nowrap pointer-events-none">
-          {tooltip}
-        </p>
-      )}
+      {tooltip && !disabled && <p className="tool-tip">{tooltip}</p>}
     </button>
   )
 }
@@ -71,11 +63,7 @@ export interface ButtonSecondaryWrapperProps {
   className?: string
 }
 export const ButtonSecondaryWrapper = ({children, className}: ButtonSecondaryWrapperProps) => (
-  <div
-    className={`flex border-[var(--colors-cool-grey-200)] border-[1px] rounded-[6px] space-x-[4px] p-[7px] justify-center items-center size-min ${className || ''}`}
-  >
-    {children}
-  </div>
+  <div className={`wrapper ${className || ''}`}>{children}</div>
 )
 
 export default ButtonSecondary
diff --git a/app/components/Feedback/Form.tsx b/app/components/Feedback/Form.tsx
@@ -40,12 +40,9 @@ const FeedbackForm = ({onSubmit, onClose, options, className}: FeedbackFormProps
     <div
       ref={clickCheckerRef}
       onClick={() => setNumClicks((current) => current + 1)}
-      className={
-        'flex flex-col feedback-form bordered !fixed top-[50px] left-[calc(13.333vw+85px)] w-[384px] ' +
-        (className ?? '')
-      }
+      className={'feedback-form bordered ' + (className ?? '')}
     >
-      <span className="black small pb-8">What was the problem?</span>
+      <span className="black small padding-bottom-32">What was the problem?</span>
       {options?.map((option) => (
         <Button
           key={option}
@@ -61,7 +58,7 @@ const FeedbackForm = ({onSubmit, onClose, options, className}: FeedbackFormProps
 
       <textarea
         name="feedback-text"
-        className={['feedback-text bordered', !options ? 'no-options' : ''].join(' ')}
+        className={['feedback-text small bordered', !options ? 'no-options' : ''].join(' ')}
         placeholder="Leave a comment (optional)"
         onChange={(e) => setMessage(e.target.value)}
       />

diff --git a/app/components/Feedback/feedback.css b/app/components/Feedback/feedback.css
@@ -1,19 +1,37 @@
-.feedback .composite-button {
-  width: fit-content;
+.feedback {
+  display: flex;
+  align-items: center;
+}
+
+.thanks {
+  transition: opacity 200ms ease-in-out;
+  margin-left: 0.5rem;
+  pointer-events: none;
+}
+.show {
+  opacity: 1;
+}
+
+.hide {
+  opacity: 0;
 }
 
 .feedback-form {
-  position: relative;
-  z-index: 2;
-  max-width: 384px;
-  padding: var(--spacing-32);
-  margin-top: var(--spacing-8);
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  top: 50px;
+  left: calc(13.333vw + 85px);
+  width: 384px;
+  padding: 30px;
+  border-radius: 6px;
 }
 
 /* Comment to Nemo when he reviews: why didn't you just do this the way you did the settings buttons? */
 .select-option {
   height: var(--spacing-48);
   padding: var(--spacing-8) var(--spacing-16);
+  border-radius: 6px;
   margin-bottom: var(--spacing-16);
   cursor: pointer;
   width: 100%;

diff --git a/app/components/Feedback/index.tsx b/app/components/Feedback/index.tsx
@@ -53,7 +53,7 @@ const Feedback = ({
   }, [showThanks])
 
   return (
-    <div className="flex items-center">
+    <div className="feedback">
       <ButtonSecondaryWrapper>
         <Action
           pageid={pageid}
@@ -80,14 +80,7 @@ const Feedback = ({
         />
       </ButtonSecondaryWrapper>
 
-      <p
-        className={
-          'transition-opacity duration-200 ease-in-out ml-2 pointer-events-none ' +
-          (showThanks ? 'opacity-100' : 'opacity-0')
-        }
-      >
-        Thank you for your feedback!
-      </p>
+      <p className={'thanks ' + (showThanks ? 'show' : 'hide')}>Thank you for your feedback!</p>
 
       {showFeedbackForm && (
         <FeedbackForm

diff --git a/app/root.css b/app/root.css
@@ -1,7 +1,4 @@
 @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway&display=swap');
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
 
 :root {
   /* colors */
@@ -163,6 +160,9 @@ h2 {
   letter-spacing: -0.14px;
 }
 
+.leading-0 {
+  line-height: 0 !important;
+}
 /* color classes */
 
 .black {

diff --git a/app/routes/questions.actions.tsx b/app/routes/questions.actions.tsx
@@ -172,7 +172,7 @@ export const Action = ({
 
   return (
     <Form
-      className="!leading-[0px]"
+      className="leading-0"
       replace
       action="/questions/actions"
       method="post"