🎨 Rework SharedCss component

al/sayfa.jsx

@@ -9,7 +9,7 @@ import Favicon from "/components/icon.svg";
 import KPass from "../components/kpass/KPass";
 import Lato400 from "/components/lato/l400.ttf";
 import Lato700 from "/components/lato/l700.ttf";
-import OrtakCss from "/components/ortakcss/birim";
+import OrtakCss from "/components/sharedCss/SharedCss";
 import Phone from "../components/phone/Phone";
 import { ChainId } from "/lib/crosschain/chains";
 import dom from "/lib/util/dom";

components/blog/eliptik-egriler/birim.jsx → components/blog/ellipticCurves/EllipticCurves.jsx

@@ -3,7 +3,7 @@ import BlogCss from "../blog.css";
 import RemainingBar from "../RemainingBar";
 import Banner from "./banner.png";
 import { ChainInfos } from "/components/chains/chains";
-import UBInuResmi from "/components/tokens/UBINU.png";
+import UBInuImage from "/components/tokens/UBINU.png";
 import { ChainId } from "/lib/crosschain/chains";
 import { ERC20 } from "/lib/ethereum/ERC20";
 import { css } from "/lib/kastro/stylesheet";
@@ -41,7 +41,7 @@ const TOTAL = 50_000_000_000;
  * @param {{ href: string, piggyback: string }=} props
  * @return {Promise<string>}
  */
-const EliptikEğriler = ({ href, piggyback }) => {
+const EllipticCurves = ({ href, piggyback }) => {
   dom.schedule(
     () => new ERC20("https://" + ChainInfos[ChainId.xa86a].rpcUrl, USDC_AVALANCHE)
       .allowance(DEV_FUND, ODUL)
@@ -57,8 +57,8 @@ const EliptikEğriler = ({ href, piggyback }) => {
       <div>
         <Banner class={BlogCss.PreviewBanner} width="100%" quality={60}
           piggyback={piggyback}
-          bundleWidth={36 * 13}
-          bundleHeight={19 * 13} />
+          bundleWidth={36 * 15}
+          bundleHeight={19 * 15} />
         <h4>{{
           en: "Elliptic curves and their applications in crypto",
           tr: "Eliptik eğriler ve kriptoda kullanımı"
@@ -79,11 +79,11 @@ const EliptikEğriler = ({ href, piggyback }) => {
           en: "Read", tr: "Oku"
         }}</button>
         <RemainingBar id={Css.UBInu} className={Css.UBInu} maximum={TOTAL} ticker="UBINU">
-          <UBInuResmi width={22} height={22} class={Css.UBInu} piggyback={piggyback} />
+          <UBInuImage width={22} height={22} class={Css.UBInu} piggyback={piggyback} />
         </RemainingBar>
       </div>
     </a>
   );
 }
 
-export default EliptikEğriler;
+export default EllipticCurves;

components/footer/Footer.jsx

@@ -1,6 +1,6 @@
 import Css from "./Footer.css";
-import Subscribe from "../subscribe/Subscribe";
-import SharedCss from "/components/ortakcss/birim";
+import SharedCss from "/components/sharedCss/SharedCss";
+import Subscribe from "/components/subscribe/Subscribe";
 import { ExternalPage } from "/crate";
 import { i18n } from "/lib/util/i18n";
 

components/kpass/KPass.jsx

@@ -5,7 +5,7 @@ import FamilyInfoCard from "./FamilyInfoCard";
 import Css from "./KPass.css";
 import PersonInfoCard from "./PersonInfoCard";
 import RegistryInfoCard from "./RegistryInfoCard";
-import SharedCss from "/components/ortakcss/birim";
+import SharedCss from "/components/sharedCss/SharedCss";
 import "/lib/did/section.d";
 import dom from "/lib/util/dom";
 

components/phone/Phone.css

@@ -1,4 +1,4 @@
-#Phone {
+#Root {
   border-radius: 40px;
   border: 5px solid #333;
   height: 520px;

components/phone/Phone.jsx

@@ -41,7 +41,7 @@ const JointCss = css`
  * @return {Promise<string>}
  */
 const Phone = ({ withKPass = true, noshow }) => (
-  <div id={Css.Phone} noshow={noshow}>
+  <div id={Css.Root} noshow={noshow}>
     <Css />
     <JointCss />
     <AnaEkran>

components/ortakcss/birim.css → components/sharedCss/SharedCss.css

@@ -68,44 +68,46 @@ hr {
  */
 .sel {}
 
-.Gizle {
-  opacity: 0;
-  pointer-events: none;
-}
+/**
+ * @export {Disabled}
+ * @preserve
+ */
+.dis {}
 
-.Düğme.SolBoşluk {
+/** left padded ;) */
+.Button.LeftPadded {
   margin-right: 1ex;
 }
 
-.Düğme.Eylem {
+.Button.Action {
   background: #5256c9;
   border-color: #5256c9;
   color: white;
   opacity: 0.9;
   transition: opacity 0.3s;
 }
 
-.Düğme.Eylem:hover {
+.Button.Action:hover {
   opacity: 1;
 }
 
-.Düğme.Bilgi {
+.Button.Info {
   background: none;
   border: 1px solid #5256c9;
   color: #5256c9;
 }
 
-.Düğme.Mavi {
+.Button.Blue {
   color: #3182CE;
   border: 1px solid #3182CE;
   background: none;
 }
 
-.Düğme.Kapalı {
+.Button.dis {
   cursor: default;
 }
 
-.Düğme {
+.Button {
   background: none;
   border-radius: 10px;
   border: 1px solid #D1D5DB;
@@ -121,27 +123,27 @@ hr {
   user-select: none;
 }
 
-.Düğme.Tehlike {
+.Button.Danger {
   color: #fff;
   background-color: #d9534f;
   border-color: #d43f3a;
   opacity: 0.9;
 }
 
-.Düğme.Tehlike:hover {
+.Button.Danger:hover {
   opacity: 1;
 }
 
 /**
  * Tema mavisi
  */
-.Mavi {
+.Blue {
   color: #3182CE
 }
 
 /**
  * Tema moru
  */
-.Mor {
+.Purple {
   color: #5256c9;
 }

components/ortakcss/birim.jsx → components/sharedCss/SharedCss.jsx

@@ -1,25 +1,25 @@
-import Css from "./birim.css";
+import Css from "./SharedCss.css";
 import Header from "/components/header/Header.css";
 import KPass from "/components/kpass/KPass.css";
 import LangPicker from "/components/langPicker/LangPicker.css";
 import Wallet from "/components/wallet/Wallet.css";
 
-const OrtakCss = () => (<>
+const SharedCss = () => (<>
   <Css shared />
   <Header shared />
   <Wallet shared />
   <LangPicker shared />
   <KPass shared />
 </>);
 
-Object.assign(OrtakCss, Css);
+Object.assign(SharedCss, Css);
 /** @enum {string} */
-OrtakCss.Header = Header;
+SharedCss.Header = Header;
 /** @enum {string} */
-OrtakCss.Wallet = Wallet;
+SharedCss.Wallet = Wallet;
 /** @enum {string} */
-OrtakCss.LangPicker = LangPicker;
+SharedCss.LangPicker = LangPicker;
 /** @enum {string} */
-OrtakCss.KPass = KPass;
+SharedCss.KPass = KPass;
 
-export default OrtakCss;
+export default SharedCss;

components/subscribe/Subscribe.jsx

@@ -1,5 +1,5 @@
 import Css from "./Subscribe.css";
-import SharedCss from "/components/ortakcss/birim";
+import SharedCss from "/components/sharedCss/SharedCss";
 import dom from "/lib/util/dom";
 
 /**
@@ -58,7 +58,7 @@ const Subscribe = ({ id }) => {
         placeholder={{ en: "Your email address", tr: "E-posta adresiniz" }}
       />
       <button
-        class={[SharedCss.Düğme, SharedCss.Eylem, Css.SubscribeButton]}
+        class={[SharedCss.Button, SharedCss.Action, Css.SubscribeButton]}
         type="submit"
       >{{
         en: "Subscribe", tr: "Kaydol"

components/wallet/Wallet.jsx

@@ -1,5 +1,5 @@
 import { ChainInfos, chainImage } from "../chains/chains";
-import OrtakCss from "../ortakcss/birim.css";
+import OrtakCss from "../sharedCss/SharedCss.css";
 import {
   Bağlantı,
   BağlantıAdı,

iptal/sayfa.jsx

@@ -4,7 +4,7 @@ import Başlık from "/components/başlık/birim.jsx";
 import Favicon from "/components/icon.svg";
 import Lato400 from "/components/lato/l400.ttf";
 import Lato700 from "/components/lato/l700.ttf";
-import OrtakCss from "/components/ortakcss/birim.jsx";
+import OrtakCss from "/components/sharedCss/SharedCss.jsx";
 import { ChainId } from "/lib/crosschain/chains";
 import dom from "/lib/util/dom";
 

kdao/sayfa.jsx

@@ -4,7 +4,7 @@ import Başlık from "/components/başlık/birim";
 import Favicon from "/components/icon.svg";
 import Lato400 from "/components/lato/l400.ttf";
 import Lato700 from "/components/lato/l700.ttf";
-import OrtakCss from "/components/ortakcss/birim";
+import OrtakCss from "/components/sharedCss/SharedCss";
 import { ChainId } from "/lib/crosschain/chains";
 import { I18nString, LangCode } from "/lib/util/i18n";
 

kpassim/sayfa.jsx

@@ -7,7 +7,7 @@ import KPass from "../components/kpass/KPass.jsx";
 import KPassContract from "/lib/ethereum/KPassLite";
 import Lato400 from "/components/lato/l400.ttf";
 import Lato700 from "/components/lato/l700.ttf";
-import OrtakCss from "/components/ortakcss/birim";
+import OrtakCss from "/components/sharedCss/SharedCss";
 import { Page } from "/crate";
 import { ChainId } from "/lib/crosschain/chains";
 import dom from "/lib/util/dom";

landing/Learn2Earn.jsx

@@ -1,7 +1,7 @@
 import LandingCss from "./page.css";
 import ECDSA from "/components/blog/ecdsa/ECDSA";
-import EliptikEğriler from "/components/blog/eliptik-egriler/birim";
-import SharedCss from "/components/ortakcss/birim.css";
+import EllipticCurves from "/components/blog/ellipticCurves/EllipticCurves";
+import SharedCss from "/components/sharedCss/SharedCss.css";
 import { ExternalPage } from "/crate";
 import { css } from "/lib/kastro/stylesheet";
 
@@ -13,10 +13,10 @@ const Css = css`
 `;
 
 const Learn2Earn = () => (
-  <div class={LandingCss.Üçlü}>
+  <div class={LandingCss.ThreeColumn}>
     <Css />
     <div id={Css.Content}>
-      <h2 class={SharedCss.Mavi}>{{
+      <h2 class={SharedCss.Blue}>{{
         en: "Learn & Earn with your KPass.",
         tr: "KPass’inle öğren ve kazan."
       }}</h2>
@@ -30,13 +30,13 @@ const Learn2Earn = () => (
           topla. Çok yakında!</>
       }}</span>
       <br />
-      <a href={ExternalPage.Blog} class={[SharedCss.Düğme, SharedCss.Bilgi, LandingCss.TopSpaced]}>{{
+      <a href={ExternalPage.Blog} class={[SharedCss.Button, SharedCss.Info, LandingCss.TopSpaced]}>{{
         en: "Learn & earn (Soon!)",
         tr: "Öğren ve kazan (Yakında!)"
       }}</a>
     </div>
     <ECDSA href="" />
-    <EliptikEğriler href="" />
+    <EllipticCurves href="" />
   </div>
 );
 

landing/Reports.jsx

@@ -1,13 +1,13 @@
 import LandingCss from "./page.css";
 import Feb25 from "/components/blog/2025.02/birim";
-import SharedCss from "/components/ortakcss/birim.css";
+import SharedCss from "/components/sharedCss/SharedCss.css";
 
 const Reports = () => (
   <div class={LandingCss.ThreeColumn}>
     <div></div>
     <Feb25 href={""} loading="lazy" />
-    <div class={LandingCss.SağaYaslı}>
-      <h2 class={SharedCss.Mor}>{{
+    <div class={LandingCss.RightAligned}>
+      <h2 class={SharedCss.Purple}>{{
         en: "KimlikDAO progress reports.",
         tr: "KimlikDAO ilerleme raporları."
       }}</h2>
@@ -21,7 +21,7 @@ const Reports = () => (
           katıldığımız etkinliklerden, kurduğumuz yeni ortaklıklara tüm
           gelişmelerini aylık ilerleme raporlarından okuyun.</>
       }}</span><br />
-      <a href="//blog.kimlikdao.org" class={[SharedCss.Düğme, SharedCss.Mavi, LandingCss.TopSpaced]}>{{
+      <a href="//blog.kimlikdao.org" class={[SharedCss.Button, SharedCss.Blue, LandingCss.TopSpaced]}>{{
         en: "All progress reports",
         tr: "Tüm ilerleme raporları"
       }}</a>

landing/header/Header.jsx

@@ -2,7 +2,7 @@ import Css from "./Header.css";
 import ArrowImage from "/components/arrow.svg";
 import LangPicker from "/components/langPicker/LangPicker";
 import Logo from "/components/logo.svg";
-import SharedCss from "/components/ortakcss/birim";
+import SharedCss from "/components/sharedCss/SharedCss";
 import { ExternalPage, Page } from "/crate";
 import { ChainId } from "/lib/crosschain/chains";
 import { I18nString } from "/lib/util/i18n";
@@ -38,7 +38,7 @@ const Header = ({ Chains, ChainNotes, DefaultChain }) => {
         <a class={SharedCss.Header.Link} href={ExternalPage.Discord} target="_blank"
           rel="noreferrer">Discord</a>
         <LangPicker />
-        <a id={Css.ActionButton} href={Page.Mint} class={[SharedCss.Düğme, SharedCss.Eylem]}>{{
+        <a id={Css.ActionButton} href={Page.Mint} class={[SharedCss.Button, SharedCss.Action]}>{{
           en: "Mint KPass", tr: "Hemen KPass al"
         }}<ArrowImage inline /></a>
       </div>

landing/hero/Gallery.jsx

@@ -1,5 +1,5 @@
 import Css from "./Gallery.css";
-import SharedCss from "/components/ortakcss/birim.css";
+import SharedCss from "/components/sharedCss/SharedCss.css";
 import Phone from "/components/phone/Phone";
 import dom from "/lib/util/dom";
 

landing/hero/Hero.jsx

@@ -1,6 +1,6 @@
 import Gallery from "./Gallery";
 import Css from "./Hero.css";
-import SharedCss from "/components/ortakcss/birim.css";
+import SharedCss from "/components/sharedCss/SharedCss.css";
 import Phone from "/components/phone/Phone";
 import { Page } from "/crate";
 import { css } from "/lib/kastro/stylesheet";
@@ -9,7 +9,7 @@ import { css } from "/lib/kastro/stylesheet";
 const JointCss = css`
   @media (max-width: 1000px) {
     #Hero { border-radius: 0; }
-    #${Phone.Css.Phone} { display: none; }
+    #${Phone.Css.Root} { display: none; }
   }
 `;
 
@@ -25,9 +25,9 @@ const Hero = () => (
         }}</h1>
         <Gallery />
         <div id={Css.Buttons}>
-          <a href={Page.Mint} id={Css.MintButton} class={[SharedCss.Düğme, SharedCss.Eylem]}>{{
+          <a href={Page.Mint} id={Css.MintButton} class={[SharedCss.Button, SharedCss.Action]}>{{
+            en: "Mint your KPass | $1",
             tr: "Hemen KPass al | ₺29",
-            en: "Mint your KPass | $1"
           }}</a>
         </div>
       </div>