From 9ee6954bc16c0d2177bbe6b5cbfed0a8fc654ef7 Mon Sep 17 00:00:00 2001 From: M Fahru Date: Mon, 30 Sep 2024 07:01:38 -0700 Subject: [PATCH] Merge pull request #20543 from overleaf/gtm-cms-icons [web] Implement "Element | Icon" content type in CMS GitOrigin-RevId: 369eed94d9306ef6fe5c974bb72231c8fb0b5560 --- .../bootstrap-5/components/all.scss | 1 + .../bootstrap-5/components/icon.scss | 20 ++++++++++ ...row-sticker.svg => arrow-sticker-grey.svg} | 0 ...s-sticker.svg => books-sticker-yellow.svg} | 0 ...n-sticker.svg => cog-pen-sticker-grey.svg} | 0 ...ker.svg => collaborate-sticker-purple.svg} | 0 ...low.svg => collaborate-sticker-yellow.svg} | 0 ...data-sticker.svg => data-sticker-grey.svg} | 0 ...ting-round.svg => edit-document-round.svg} | 0 ...icker.svg => formatting-sticker-green.svg} | 0 ...ticker.svg => house-tree-sticker-grey.svg} | 0 ...hub-pink.svg => hub-sticker-tangerine.svg} | 0 ...lock-sticker.svg => lock-sticker-grey.svg} | 0 ...sticker.svg => overleaf-sticker-green.svg} | 0 ...{pen-purple.svg => pen-sticker-purple.svg} | 0 ...-sticker.svg => pen-sticker-tangerine.svg} | 0 ...i-sticker.svg => pi-sticker-tangerine.svg} | 0 ...-red.svg => support-sticker-tangerine.svg} | 0 ...sticker.svg => support-sticker-yellow.svg} | 0 services/web/types/cms.ts | 40 +++++++++++++++++++ 20 files changed, 61 insertions(+) create mode 100644 services/web/frontend/stylesheets/bootstrap-5/components/icon.scss rename services/web/public/img/website-redesign/{arrow-sticker.svg => arrow-sticker-grey.svg} (100%) rename services/web/public/img/website-redesign/{books-sticker.svg => books-sticker-yellow.svg} (100%) rename services/web/public/img/website-redesign/{cog-pen-sticker.svg => cog-pen-sticker-grey.svg} (100%) rename services/web/public/img/website-redesign/{collaborate-sticker.svg => collaborate-sticker-purple.svg} (100%) rename services/web/public/img/website-redesign/{collaborate-yellow.svg => collaborate-sticker-yellow.svg} (100%) rename services/web/public/img/website-redesign/{data-sticker.svg => data-sticker-grey.svg} (100%) rename services/web/public/img/website-redesign/{writing-round.svg => edit-document-round.svg} (100%) rename services/web/public/img/website-redesign/{formatting-sticker.svg => formatting-sticker-green.svg} (100%) rename services/web/public/img/website-redesign/{house-tree-sticker.svg => house-tree-sticker-grey.svg} (100%) rename services/web/public/img/website-redesign/{hub-pink.svg => hub-sticker-tangerine.svg} (100%) rename services/web/public/img/website-redesign/{lock-sticker.svg => lock-sticker-grey.svg} (100%) rename services/web/public/img/website-redesign/{overleaf-sticker.svg => overleaf-sticker-green.svg} (100%) rename services/web/public/img/website-redesign/{pen-purple.svg => pen-sticker-purple.svg} (100%) rename services/web/public/img/website-redesign/{pen-sticker.svg => pen-sticker-tangerine.svg} (100%) rename services/web/public/img/website-redesign/{pi-sticker.svg => pi-sticker-tangerine.svg} (100%) rename services/web/public/img/website-redesign/{support-red.svg => support-sticker-tangerine.svg} (100%) rename services/web/public/img/website-redesign/{support-sticker.svg => support-sticker-yellow.svg} (100%) create mode 100644 services/web/types/cms.ts diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/all.scss b/services/web/frontend/stylesheets/bootstrap-5/components/all.scss index 523b901bc5..26f839df07 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/components/all.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/components/all.scss @@ -10,6 +10,7 @@ @import 'card'; @import 'badge'; @import 'form'; +@import 'icon'; @import 'input-suggestions'; @import 'list'; @import 'modal'; diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/icon.scss b/services/web/frontend/stylesheets/bootstrap-5/components/icon.scss new file mode 100644 index 0000000000..d56bd4998b --- /dev/null +++ b/services/web/frontend/stylesheets/bootstrap-5/components/icon.scss @@ -0,0 +1,20 @@ +.icon-double-green-round-background { + border-radius: 50%; + background: var(--green-30); + color: var(--dark-jungle-green); + display: inline-flex; + border: var(--spacing-04) solid var(--green-10); + padding: var(--spacing-04); + + i { + font-size: 24px; + } +} + +.icon-large-purple-text { + color: var(--sapphire-blue); + + i { + font-size: 50px; + } +} diff --git a/services/web/public/img/website-redesign/arrow-sticker.svg b/services/web/public/img/website-redesign/arrow-sticker-grey.svg similarity index 100% rename from services/web/public/img/website-redesign/arrow-sticker.svg rename to services/web/public/img/website-redesign/arrow-sticker-grey.svg diff --git a/services/web/public/img/website-redesign/books-sticker.svg b/services/web/public/img/website-redesign/books-sticker-yellow.svg similarity index 100% rename from services/web/public/img/website-redesign/books-sticker.svg rename to services/web/public/img/website-redesign/books-sticker-yellow.svg diff --git a/services/web/public/img/website-redesign/cog-pen-sticker.svg b/services/web/public/img/website-redesign/cog-pen-sticker-grey.svg similarity index 100% rename from services/web/public/img/website-redesign/cog-pen-sticker.svg rename to services/web/public/img/website-redesign/cog-pen-sticker-grey.svg diff --git a/services/web/public/img/website-redesign/collaborate-sticker.svg b/services/web/public/img/website-redesign/collaborate-sticker-purple.svg similarity index 100% rename from services/web/public/img/website-redesign/collaborate-sticker.svg rename to services/web/public/img/website-redesign/collaborate-sticker-purple.svg diff --git a/services/web/public/img/website-redesign/collaborate-yellow.svg b/services/web/public/img/website-redesign/collaborate-sticker-yellow.svg similarity index 100% rename from services/web/public/img/website-redesign/collaborate-yellow.svg rename to services/web/public/img/website-redesign/collaborate-sticker-yellow.svg diff --git a/services/web/public/img/website-redesign/data-sticker.svg b/services/web/public/img/website-redesign/data-sticker-grey.svg similarity index 100% rename from services/web/public/img/website-redesign/data-sticker.svg rename to services/web/public/img/website-redesign/data-sticker-grey.svg diff --git a/services/web/public/img/website-redesign/writing-round.svg b/services/web/public/img/website-redesign/edit-document-round.svg similarity index 100% rename from services/web/public/img/website-redesign/writing-round.svg rename to services/web/public/img/website-redesign/edit-document-round.svg diff --git a/services/web/public/img/website-redesign/formatting-sticker.svg b/services/web/public/img/website-redesign/formatting-sticker-green.svg similarity index 100% rename from services/web/public/img/website-redesign/formatting-sticker.svg rename to services/web/public/img/website-redesign/formatting-sticker-green.svg diff --git a/services/web/public/img/website-redesign/house-tree-sticker.svg b/services/web/public/img/website-redesign/house-tree-sticker-grey.svg similarity index 100% rename from services/web/public/img/website-redesign/house-tree-sticker.svg rename to services/web/public/img/website-redesign/house-tree-sticker-grey.svg diff --git a/services/web/public/img/website-redesign/hub-pink.svg b/services/web/public/img/website-redesign/hub-sticker-tangerine.svg similarity index 100% rename from services/web/public/img/website-redesign/hub-pink.svg rename to services/web/public/img/website-redesign/hub-sticker-tangerine.svg diff --git a/services/web/public/img/website-redesign/lock-sticker.svg b/services/web/public/img/website-redesign/lock-sticker-grey.svg similarity index 100% rename from services/web/public/img/website-redesign/lock-sticker.svg rename to services/web/public/img/website-redesign/lock-sticker-grey.svg diff --git a/services/web/public/img/website-redesign/overleaf-sticker.svg b/services/web/public/img/website-redesign/overleaf-sticker-green.svg similarity index 100% rename from services/web/public/img/website-redesign/overleaf-sticker.svg rename to services/web/public/img/website-redesign/overleaf-sticker-green.svg diff --git a/services/web/public/img/website-redesign/pen-purple.svg b/services/web/public/img/website-redesign/pen-sticker-purple.svg similarity index 100% rename from services/web/public/img/website-redesign/pen-purple.svg rename to services/web/public/img/website-redesign/pen-sticker-purple.svg diff --git a/services/web/public/img/website-redesign/pen-sticker.svg b/services/web/public/img/website-redesign/pen-sticker-tangerine.svg similarity index 100% rename from services/web/public/img/website-redesign/pen-sticker.svg rename to services/web/public/img/website-redesign/pen-sticker-tangerine.svg diff --git a/services/web/public/img/website-redesign/pi-sticker.svg b/services/web/public/img/website-redesign/pi-sticker-tangerine.svg similarity index 100% rename from services/web/public/img/website-redesign/pi-sticker.svg rename to services/web/public/img/website-redesign/pi-sticker-tangerine.svg diff --git a/services/web/public/img/website-redesign/support-red.svg b/services/web/public/img/website-redesign/support-sticker-tangerine.svg similarity index 100% rename from services/web/public/img/website-redesign/support-red.svg rename to services/web/public/img/website-redesign/support-sticker-tangerine.svg diff --git a/services/web/public/img/website-redesign/support-sticker.svg b/services/web/public/img/website-redesign/support-sticker-yellow.svg similarity index 100% rename from services/web/public/img/website-redesign/support-sticker.svg rename to services/web/public/img/website-redesign/support-sticker-yellow.svg diff --git a/services/web/types/cms.ts b/services/web/types/cms.ts new file mode 100644 index 0000000000..28f72c9bca --- /dev/null +++ b/services/web/types/cms.ts @@ -0,0 +1,40 @@ +export type IconElementMaterial = + | 'add_notes' + | 'assured_workload' + | 'biotech' + | 'book_5' + | 'draw' + | 'edit_document' + | 'edit_note' + | 'function' + | 'groups' + | 'live_tv' + | 'local_library' + | 'lock' + | 'picture_as_pdf' + | 'preview' + | 'school' + | 'security' + | 'verified_user' + | 'workspace_premium' + +export type IconElementSticker = + | 'arrow_sticker_grey' + | 'books_sticker_yellow' + | 'cog-pen_sticker_grey' + | 'collaborate_sticker_purple' + | 'collaborate_sticker_yellow' + | 'data_sticker_grey' + | 'formatting_sticker_green' + | 'house-tree_sticker_grey' + | 'hub_sticker_tangerine' + | 'lock_sticker_grey' + | 'overleaf_sticker_green' + | 'pen_sticker_purple' + | 'pen_sticker_tangerine' + | 'pi_sticker_tangerine' + | 'support_sticker_tangerine' + | 'support_sticker_yellow' + +export type IconElement = IconElementMaterial | IconElementSticker +export type IconStyle = 'Green circle' | 'Large purple text' | 'Default'