1 files changed, 65 insertions, 0 deletions
diff --git a/src/frontend/components/CurrencySwitcher/CurrencySwitcher.styled.ts b/src/frontend/components/CurrencySwitcher/CurrencySwitcher.styled.ts
new file mode 100644
index 0000000..6ea0669
--- /dev/null
+++ b/src/frontend/components/CurrencySwitcher/CurrencySwitcher.styled.ts
@@ -0,0 +1,65 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import styled from 'styled-components';
+
+export const CurrencySwitcher = styled.div`
+  display: flex;
+  justify-content: flex-end;
+`;
+
+export const Container = styled.div`
+  display: flex;
+  align-items: center;
+  position: relative;
+  margin-left: 40px;
+  color: #605f64;
+
+  &::-webkit-input-placeholder,
+  &::-moz-placeholder,
+  :-ms-input-placeholder,
+  :-moz-placeholder {
+    font-size: 12px;
+    color: #605f64;
+  }
+`;
+
+export const SelectedConcurrency = styled.span`
+  font-size: ${({ theme }) => theme.sizes.mLarge};
+  text-align: center;
+  font-weight: ${({ theme }) => theme.fonts.regular};
+
+  position: relative;
+  left: 35px;
+  width: 20px;
+  display: inline-block;
+`;
+
+export const Arrow = styled.img.attrs({
+  src: '/icons/Chevron.svg',
+  alt: 'arrow',
+})`
+  position: absolute;
+  right: 15px;
+  width: 12px;
+  height: 17px;
+`;
+
+export const Select = styled.select`
+  -webkit-appearance: none;
+  -webkit-border-radius: 0px;
+  font-size: ${({ theme }) => theme.sizes.mLarge};
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+  background: transparent;
+  font-weight: ${({ theme }) => theme.fonts.regular};
+  border: 1px solid ${({ theme }) => theme.colors.borderGray};
+  width: 130px;
+  height: 40px;
+  flex-shrink: 0;
+  padding: 1px 0 0 45px;
+  font-size: 16px;
+  border-radius: 10px;
+`;