refactor(wrapped): move panels to components

1 files changed, 100 insertions, 0 deletions

diff --git a/src/lib/Tools/Wrapped/wrapped.css b/src/lib/Tools/Wrapped/wrapped.css
new file mode 100644
index 00000000..1ac01d85
--- /dev/null
+++ b/src/lib/Tools/Wrapped/wrapped.css
@@ -0,0 +1,100 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');
+@import url('https://fonts.googleapis.com/css?family=Overpass:400,600,700,800');
+
+.categories-grid {
+	display: flex;
+	flex-wrap: wrap;
+	row-gap: 1.5em;
+	column-gap: 1.5em;
+	padding: 2%;
+	justify-content: center;
+	font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell,
+		Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+	background-color: #0b1622;
+}
+
+.categories-grid b {
+	font-family: Overpass, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell,
+		Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+	font-weight: 600;
+}
+
+.category-grid,
+.image-grid {
+	background-color: #151f2e;
+	border-radius: 4px;
+	color: rgb(159, 173, 189);
+}
+
+.pure-category,
+.avatar-grid {
+	padding: 1.5%;
+}
+
+.category-grid {
+	display: grid;
+}
+
+.image-grid {
+	display: flex;
+	column-gap: 1em;
+	flex-wrap: wrap;
+}
+
+.image-grid img {
+	width: 6em;
+	height: auto;
+	border-radius: 3px;
+}
+
+.categories-grid a {
+	text-decoration: none;
+	color: unset;
+}
+
+.transparent .categories-grid {
+	background-color: transparent !important;
+}
+
+.light-theme .categories-grid {
+	background-color: #edf1f5;
+}
+
+.light-theme .category-grid {
+	background-color: #fafafa;
+	color: rgb(92, 114, 138);
+}
+
+.light-theme .image-grid {
+	background-color: #fafafa;
+	color: rgb(92, 114, 138);
+}
+
+ol {
+	margin: 0 !important;
+}
+
+#watermark {
+	color: rgb(61, 180, 242);
+}
+
+#wrapped-final {
+	height: auto;
+	width: 50%;
+}
+
+#list-container {
+	display: flex;
+	gap: 1rem;
+	flex-wrap: wrap;
+	align-items: start;
+}
+
+.list {
+	flex-grow: 1;
+	flex-basis: 1%;
+}
+
+#wrapped {
+	overflow-y: scroll;
+}