AmineTMIRI/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui fix

Browse Source
This commit is contained in:
MuslemRahimi 2024-11-09 11:38:39 +01:00
parent 2b249d0406
commit b5417f20e4
17 changed files with 222 additions and 416 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/assets/style_quill.css
View File

@ -886,7 +886,7 @@
background-color: #fff;
}
.ql-toolbar.ql-snow {
border: 1px solid #2a303c;
border: 1px solid #313131;
box-sizing: border-box;
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
padding: 8px;

548
src/lib/components/ImpliedVolatility.svelte
View File

@ -1,399 +1,199 @@
<script lang ='ts'>
import { impliedVolatilityComponent, displayCompanyName, stockTicker, assetType, etfTicker, screenWidth, getCache, setCache} from '$lib/store';
import InfoModal from '$lib/components/InfoModal.svelte';
import { Chart } from 'svelte-echarts'
import { formatDateRange } from "$lib/utils";
import { init, use } from 'echarts/core'
<script lang 'ts'></script>
import { LineChart } from 'echarts/charts'
import { GridComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
use([LineChart, GridComponent, CanvasRenderer])
<section class="overflow-hidden text-white h-full pb-8">
<main class="overflow-hidden">
<div class="flex flex-row items-center">
<label
for="impliedVolatilityInfo"
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold"
>
Implied Volatility
</label>
<InfoModal
title={"Implied Volatility"}
content={"An implied volatility of XY% means the market expects significant price fluctuations for the stock, with an annualized potential range of ±XY% from its current price. This indicates high uncertainty and risk, leading to more expensive options but doesn't predict price direction."}
id={"impliedVolatilityInfo"}
/>
</div>
export let data;
let isLoaded = false;
let displayIV = 'iv60';
let rawData = [];
let optionsData;
let lowestIV;
let highestIV;
let lowestRV;
let highestRV;
let ivRank;
function findLowestAndhighestIV(data, lastDateStr) {
// Convert lastDateStr to Date object
const lastDate = new Date(lastDateStr);
// Set the first date to the beginning of the month of lastDate
const firstDate = new Date(lastDate.getFullYear(), lastDate.getMonth(), 1);
// Filter data to include only prices within the specified month period
const filteredData = data.filter(item => {
const currentDate = new Date(item?.date);
return currentDate >= firstDate && currentDate <= lastDate;
});
// Extract prices from filtered data
let impliedVol = filteredData?.map(item => parseFloat(item?.iv60));
let realizedVol = filteredData?.map(item => parseFloat(item['60dorhv']));
// Find the lowest and highest prices
lowestIV = Math.min(...impliedVol)?.toFixed(0);
highestIV = Math.max(...impliedVol)?.toFixed(0);
lowestRV = Math.min(...realizedVol)?.toFixed(0);
highestRV = Math.max(...realizedVol)?.toFixed(0);
}
function changeStatement(event)
{
displayIV = event.target.value;
optionsData = getPlotOptions()
}
function getPlotOptions() {
let dates = [];
let priceList = [];
let ivList = [];
let realizedVolatility = [];
// Iterate over the data and extract required information
rawData?.forEach(item => {
dates?.push(item?.date);
priceList?.push(item?.stockpx);
ivList?.push(item[displayIV])
realizedVolatility?.push(item['60dorhv'])
});
// Find the lowest and highest prices
findLowestAndhighestIV(rawData, rawData?.slice(-1)?.at(0)?.date)
// Calculate IV Rank
const lowestIV = Math.min(...ivList); // Find the lowest IV in the past
const highestIV = Math.max(...ivList); // Find the highest IV in the past
ivRank = ((ivList?.slice(-1) - lowestIV) / (highestIV - lowestIV) * 100).toFixed(2); // Compute IV Rank
const option = {
silent: true,
tooltip: {
trigger: 'axis',
hideDelay: 100, // Set the delay in milliseconds
},
animation: false,
grid: {
left: '0%',
right: '0%',
bottom: '0%',
top: '10%',
containLabel: true
},
xAxis:
{
type: 'category',
boundaryGap: false,
data: dates,
},
yAxis: [
{
type: 'value',
splitLine: {
show: false, // Disable x-axis grid lines
},
axisLabel: {
color: '#6E7079', // Change label color to white
formatter: function (value, index) {
// Display every second tick
if (index % 2 === 0) {
value = Math.max(value, 0);
return '$'+value;
} else {
return ''; // Hide this tick
}
}
},
},
{
type: 'value',
splitLine: {
show: false, // Disable x-axis grid lines
},
position: 'right',
axisLabel: {
formatter: function (value, index) {
if (index % 2 === 0) {
return value?.toFixed(0)+'%'
} else {
return ''; // Hide this tick
}
}
}
},
],
series: [
{
name: 'Price',
data: priceList,
type: 'line',
itemStyle: {
color: '#fff'
},
showSymbol: false
},
{
name: 'IV',
data: ivList,
type: 'line',
areaStyle: {opacity: 0.3},
stack: 'ImpliedVolatility',
yAxisIndex: 1,
itemStyle: {
color: '#F03500'
},
showSymbol: false,
},
{
name: 'RV',
data: realizedVolatility,
type: 'line',
areaStyle: {opacity: 0.3},
stack: 'ImpliedVolatility',
yAxisIndex: 1,
itemStyle: {
color: '#3B82F6'
},
showSymbol: false,
},
]
};
return option;
}
const getImpliedVolatility = async (ticker) => {
// Get cached data for the specific tickerID
const cachedData = getCache(ticker, 'getImpliedVolatility');
if (cachedData) {
rawData = cachedData;
} else {
const postData = {'ticker': ticker, path: 'implied-volatility'};
// make the POST request to the endpoint
const response = await fetch('/api/ticker-data', {
method: 'POST',
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(postData)
});
rawData = await response?.json();
// Cache the data for this specific tickerID with a specific name 'getImpliedVolatility'
setCache(ticker, rawData, 'getImpliedVolatility');
}
if(rawData?.length !== 0) {
$impliedVolatilityComponent = true;
} else {
$impliedVolatilityComponent = false;
}
};
$: {
if($assetType === 'stock' ? $stockTicker : $etfTicker && typeof window !== 'undefined') {
isLoaded=false;
displayIV = 'iv60';
const ticker = $assetType === 'stock' ? $stockTicker : $etfTicker
const asyncFunctions = [
getImpliedVolatility(ticker)
];
Promise.all(asyncFunctions)
.then((results) => {
optionsData = getPlotOptions()
})
.catch((error) => {
console.error('An error occurred:', error);
});
isLoaded = true;
}
}
$: charNumber = $screenWidth < 640 ? 20 : 40;
</script>
<section class="overflow-hidden text-white h-full pb-8">
<main class="overflow-hidden ">
<div class="flex flex-row items-center">
<label for="impliedVolatilityInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
Implied Volatility
</label>
<InfoModal
title={"Implied Volatility"}
content={"An implied volatility of XY% means the market expects significant price fluctuations for the stock, with an annualized potential range of ±XY% from its current price. This indicates high uncertainty and risk, leading to more expensive options but doesn't predict price direction."}
id={"impliedVolatilityInfo"}
/>
</div>
{#if data?.user?.tier === 'Pro'}
{#if isLoaded}
{#if data?.user?.tier === "Pro"}
{#if isLoaded}
{#if rawData?.length !== 0}
<div class="w-full flex flex-col items-start mb-2">
<div class="w-full flex flex-col items-start mb-2">
<div class="text-white text-[1rem] mt-2 mb-2 w-full">
Based on the past 12 months of historical data, {$displayCompanyName} has an IV Rank of <span class="font-semibold">{ivRank}%</span>, with the current implied volatility standing at <span class="font-semibold">{rawData?.slice(-1)?.at(0)?.iv60}%</span>.
Based on the past 12 months of historical data, {$displayCompanyName}
has an IV Rank of <span class="font-semibold">{ivRank}%</span>,
with the current implied volatility standing at
<span class="font-semibold"
>{rawData?.slice(-1)?.at(0)?.iv60}%</span
>.
</div>
</div>
<select class="mt-5 mb-5 sm:mb-0 sm:mt-3 ml-1 w-44 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-[#2A303C]" on:change={changeStatement}>
<option disabled>Choose IV Period</option>
<option selected value="iv60">
60 Day IV
</option>
<option value="iv90">
90 Day IV
</option>
<option value="252dclshv">
1 Year historical volatility
</option>
</select>
<div class="pb-2 rounded-lg bg-[#09090B]">
<div class="app w-full h-[300px] mt-5">
<Chart {init} options={optionsData} class="chart" />
</div>
</div>
<div class="flex flex-row items-center justify-between mx-auto mt-5 w-full sm:w-11/12">
<div class="mt-3.5 sm:mt-0 flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center">
<div class="h-full transform -translate-x-1/2 " aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#fff] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<span class="mt-2 sm:mt-0 text-white text-center sm:text-start text-xs sm:text-md inline-block">
<select
class="mt-5 mb-5 sm:mb-0 sm:mt-3 ml-1 w-44 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-[#313131]"
on:change={changeStatement}
>
<option disabled>Choose IV Period</option>
<option selected value="iv60"> 60 Day IV </option>
<option value="iv90"> 90 Day IV </option>
<option value="252dclshv"> 1 Year historical volatility </option>
</select>
<div class="pb-2 rounded-lg bg-[#09090B]">
<div class="app w-full h-[300px] mt-5">
<Chart {init} options={optionsData} class="chart" />
</div>
</div>
<div
class="flex flex-row items-center justify-between mx-auto mt-5 w-full sm:w-11/12"
>
<div
class="mt-3.5 sm:mt-0 flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center"
>
<div
class="h-full transform -translate-x-1/2"
aria-hidden="true"
></div>
<div
class="w-3 h-3 bg-[#fff] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2"
aria-hidden="true"
></div>
<span
class="mt-2 sm:mt-0 text-white text-center sm:text-start text-xs sm:text-md inline-block"
>
Price
</span>
</div>
<div class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center">
<div class="h-full transform -translate-x-1/2 " aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#F03500] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<span class="mt-2 sm:mt-0 text-white text-xs sm:text-md sm:font-medium inline-block">
Implied Volatility
</span>
</span>
</div>
<div
class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center"
>
<div
class="h-full transform -translate-x-1/2"
aria-hidden="true"
></div>
<div
class="w-3 h-3 bg-[#F03500] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2"
aria-hidden="true"
></div>
<span
class="mt-2 sm:mt-0 text-white text-xs sm:text-md sm:font-medium inline-block"
>
Implied Volatility
</span>
</div>
<div class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center">
<div class="h-full transform -translate-x-1/2 " aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#3B82F6] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<span class="mt-2 sm:mt-0 text-white text-xs sm:text-md sm:font-medium inline-block">
Realized Volatility
</span>
<div
class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center"
>
<div
class="h-full transform -translate-x-1/2"
aria-hidden="true"
></div>
<div
class="w-3 h-3 bg-[#3B82F6] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2"
aria-hidden="true"
></div>
<span
class="mt-2 sm:mt-0 text-white text-xs sm:text-md sm:font-medium inline-block"
>
Realized Volatility
</span>
</div>
</div>
<h2 class="mt-10 mr-1 flex flex-row items-center text-white text-xl sm:text-2xl font-bold mb-3">
</div>
<h2
class="mt-10 mr-1 flex flex-row items-center text-white text-xl sm:text-2xl font-bold mb-3"
>
Latest Information
</h2>
<div class="flex justify-start items-center w-full m-auto ">
</h2>
<div class="flex justify-start items-center w-full m-auto">
<table class="w-full" data-test="statistics-table">
<tbody>
<tr class="border-y border-gray-800 odd:bg-[#27272A]">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>Date</span>
</td>
<td class="px-[5px] py-1.5 text-right text-sm sm:text-[1rem] font-medium xs:px-2.5 xs:py-2">
{formatDateRange(rawData?.slice(-1)?.at(0)?.date)}
</td>
</tr>
<tr class="border-y border-gray-800 odd:bg-[#27272A]">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>IV Range</span>
</td>
<td class="px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2">
{lowestIV+'%'+'-'+highestIV+'%'}
</td>
</tr>
<tr class="border-y border-gray-800 odd:bg-[#27272A]">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>RV Range</span>
</td>
<td class="px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2">
{lowestRV+'%'+'-'+highestRV+'%'}
</td>
</tr>
<tr class="border-y border-gray-800 odd:bg-[#27272A]">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>Date</span>
</td>
<td
class="px-[5px] py-1.5 text-right text-sm sm:text-[1rem] font-medium xs:px-2.5 xs:py-2"
>
{formatDateRange(rawData?.slice(-1)?.at(0)?.date)}
</td>
</tr>
<tr class="border-y border-gray-800 odd:bg-[#27272A]">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>IV Range</span>
</td>
<td
class="px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2"
>
{lowestIV + "%" + "-" + highestIV + "%"}
</td>
</tr>
<tr class="border-y border-gray-800 odd:bg-[#27272A]">
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>RV Range</span>
</td>
<td
class="px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2"
>
{lowestRV + "%" + "-" + highestRV + "%"}
</td>
</tr>
</tbody>
</table>
</table>
</div>
{/if}
{:else}
{:else}
<div class="flex justify-center items-center h-80">
<div class="relative">
<label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<span class="loading loading-spinner loading-md text-gray-400"></span>
<div class="relative">
<label
class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
>
<span class="loading loading-spinner loading-md text-gray-400"
></span>
</label>
</div>
</div>
{/if}
{:else}
<div class="shadow-lg shadow-bg-[#000] bg-[#111112] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
<svg class="mr-1.5 w-5 h-5 inline-block"xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#A3A3A3" d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"/></svg>
Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
</div>
{/if}
</main>
</section>
<style>
</div>
{/if}
{:else}
<div
class="shadow-lg shadow-bg-[#000] bg-[#111112] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold"
>
<svg
class="mr-1.5 w-5 h-5 inline-block"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><path
fill="#A3A3A3"
d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
/></svg
>
Unlock content with
<a
class="inline-block ml-2 text-blue-400 hover:sm:text-white"
href="/pricing">Pro Subscription</a
>
</div>
{/if}
</main>
</section>
<style>
.app {
height: 300px;
max-width: 100%; /* Ensure chart width doesn't exceed the container */
height: 300px;
max-width: 100%; /* Ensure chart width doesn't exceed the container */
}
@media (max-width: 640px) {
.app {
height: 210px;
.app {
height: 210px;
}
}
}
.chart {
width: 100%;
width: 100%;
}
</style>
</style>

4
src/lib/components/MobileCommentEditor.svelte
View File

@ -254,7 +254,7 @@
<!--Start Quill Editor-->
<div class="{!loadingEditor ? 'hidden' : ''} mt-3 pl-7 pr-7">
<div
class="quill-editor min-h-[96px] h-[120px] resize-none focus-none ring-none rounded-none bg-[#2A303C] text-white"
class="quill-editor min-h-[96px] h-[120px] resize-none focus-none ring-none rounded-none bg-[#313131] text-white"
>
<select class="ql-header" aria-label="Header" title="Header">
<option selected></option>
@ -266,7 +266,7 @@
placeholder="Loading editor..."
class="{loadingEditor
? 'hidden'
: ''} min-h-[96px] h-[120px] text-sm italic w-full resize-none focus-none ring-none rounded-none bg-[#2A303C] text-white"
: ''} min-h-[96px] h-[120px] text-sm italic w-full resize-none focus-none ring-none rounded-none bg-[#313131] text-white"
></textarea>
<!--End Quill Editor-->

2
src/lib/components/OptionsData.svelte
View File

@ -154,7 +154,7 @@
{#if isLoaded}
<div class="flex flex-row items-end justify-between">
<select
class="mt-5 sm:mb-0 ml-1 w-36 select select-bordered select-sm p-0 pl-5 bg-[#2A303C]"
class="mt-5 sm:mb-0 ml-1 w-36 select select-bordered select-sm p-0 pl-5 bg-[#313131]"
on:change={changeStatement}
>
<option disabled>Choose a time period</option>

2
src/lib/components/TrendAnalysis.svelte
View File

@ -176,7 +176,7 @@
</div>
<select
class="mt-1 sm:mt-3 ml-1 w-36 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-[#2A303C]"
class="mt-1 sm:mt-3 ml-1 w-36 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-[#313131]"
on:change={changeStatement}
>
<option disabled>Choose Time Period</option>

4
src/routes/crypto/[tickerID]/+layout.svelte
View File

@ -750,14 +750,14 @@
<div class="hidden sm:flex ml-auto">
{#if holdingShares !== 0 && data?.user}
<label for="{!data?.user ? 'userLogin' : userPortfolio?.length !== 0 ? 'typeOfTrade' : ''}" class="py-2 px-3 text-sm sm:text-[1rem] cursor-pointer mr-1 flex flex-row ease-in-out duration-100 rounded-full shadow-lg bg-[#09090B] hover:bg-[#2A303C] border border-slate-800 normal-case cursor-pointer items-center">
<label for="{!data?.user ? 'userLogin' : userPortfolio?.length !== 0 ? 'typeOfTrade' : ''}" class="py-2 px-3 text-sm sm:text-[1rem] cursor-pointer mr-1 flex flex-row ease-in-out duration-100 rounded-full shadow-lg bg-[#09090B] hover:bg-[#313131] border border-slate-800 normal-case cursor-pointer items-center">
<svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M8 2.5a.5.5 0 0 0-1 0V7H2.5a.5.5 0 0 0 0 1H7v4.5a.5.5 0 0 0 1 0V8h4.5a.5.5 0 0 0 0-1H8z"/></svg>
<span class="text-white font-medium">
Portfolio
</span>
</label>
{:else}
<label for="{!data?.user ? 'userLogin' : userPortfolio?.length === 0 ? 'addPortfolio' : 'buyTradeModal'}" class="py-2 px-3 text-sm sm:text-[1rem] cursor-pointer mr-1 flex flex-row ease-in-out duration-100 rounded-full shadow-lg bg-[#09090B] hover:bg-[#2A303C] border border-slate-800 normal-case cursor-pointer items-center">
<label for="{!data?.user ? 'userLogin' : userPortfolio?.length === 0 ? 'addPortfolio' : 'buyTradeModal'}" class="py-2 px-3 text-sm sm:text-[1rem] cursor-pointer mr-1 flex flex-row ease-in-out duration-100 rounded-full shadow-lg bg-[#09090B] hover:bg-[#313131] border border-slate-800 normal-case cursor-pointer items-center">
<svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M8 2.5a.5.5 0 0 0-1 0V7H2.5a.5.5 0 0 0 0 1H7v4.5a.5.5 0 0 0 1 0V8h4.5a.5.5 0 0 0 0-1H8z"/></svg>
<span class="text-white font-medium">
Portfolio

18
src/routes/economic-indicator/+page.svelte
View File

@ -310,7 +310,10 @@
type: "line",
areaStyle: { opacity: 0.2 },
smooth: true,
showSymbol: false,
symbol: "none",
itemStyle: {
color: "#fff",
},
},
tooltip: {
trigger: "axis",
@ -561,7 +564,10 @@
type: "line",
areaStyle: { opacity: 0.2 },
smooth: true,
showSymbol: false,
symbol: "none",
itemStyle: {
color: "#fff",
},
},
tooltip: {
trigger: "axis",
@ -766,7 +772,7 @@
<div class="w-full text-white">
<div class="relative flex justify-end">
<select
class="w-24 select select-bordered select-sm p-0 pl-5 bg-[#2A303C]"
class="w-24 select select-bordered select-sm p-0 pl-5 bg-[#313131]"
on:change={changeStatement}
>
<option disabled>Choose a Time Period</option>
@ -794,7 +800,7 @@
class="cursor-pointer rounded-l-md inline-block w-full py-1.5 {filterRule ===
'annual'
? 'bg-[#fff] text-black'
: 'bg-[#2A303C] text-white'} font-semibold border-r border-gray-600"
: 'bg-[#313131] text-white'} font-semibold border-r border-gray-600"
aria-current="page"
>
Annual
@ -807,14 +813,14 @@
class="cursor-pointer inline-block w-full py-1.5 {filterRule ===
'quarterly'
? 'bg-[#fff] text-black'
: 'bg-[#2A303C] text-white'} font-semibold rounded-r-md"
: 'bg-[#313131] text-white'} font-semibold rounded-r-md"
>
Quartely
</label>
{:else}
<a
href="/pricing"
class="flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-2.5 bg-[#2A303C] font-semibold text-white rounded-r-lg"
class="flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-2.5 bg-[#313131] font-semibold text-white rounded-r-lg"
>
<span class="">Quarterly</span>
<svg

4
src/routes/etf/[tickerID]/+layout.svelte
View File

@ -783,14 +783,14 @@
<div class="hidden sm:flex ml-auto">
{#if holdingShares !== 0 && data?.user}
<label for="{!data?.user ? 'userLogin' : userPortfolio?.length !== 0 ? 'typeOfTrade' : ''}" class="py-2 px-3 text-sm sm:text-[1rem] cursor-pointer mr-1 flex flex-row ease-in-out duration-100 rounded-full shadow-lg bg-[#09090B] hover:bg-[#2A303C] border border-slate-800 normal-case cursor-pointer items-center">
<label for="{!data?.user ? 'userLogin' : userPortfolio?.length !== 0 ? 'typeOfTrade' : ''}" class="py-2 px-3 text-sm sm:text-[1rem] cursor-pointer mr-1 flex flex-row ease-in-out duration-100 rounded-full shadow-lg bg-[#09090B] hover:bg-[#313131] border border-slate-800 normal-case cursor-pointer items-center">
<svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M8 2.5a.5.5 0 0 0-1 0V7H2.5a.5.5 0 0 0 0 1H7v4.5a.5.5 0 0 0 1 0V8h4.5a.5.5 0 0 0 0-1H8z"/></svg>
<span class="text-white font-medium">
Portfolio
</span>
</label>
{:else}
<label for="{!data?.user ? 'userLogin' : userPortfolio?.length === 0 ? 'addPortfolio' : 'buyTradeModal'}" class="py-2 px-3 text-sm sm:text-[1rem] cursor-pointer mr-1 flex flex-row ease-in-out duration-100 rounded-full shadow-lg bg-[#09090B] hover:bg-[#2A303C] border border-slate-800 normal-case cursor-pointer items-center">
<label for="{!data?.user ? 'userLogin' : userPortfolio?.length === 0 ? 'addPortfolio' : 'buyTradeModal'}" class="py-2 px-3 text-sm sm:text-[1rem] cursor-pointer mr-1 flex flex-row ease-in-out duration-100 rounded-full shadow-lg bg-[#09090B] hover:bg-[#313131] border border-slate-800 normal-case cursor-pointer items-center">
<svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="white" d="M8 2.5a.5.5 0 0 0-1 0V7H2.5a.5.5 0 0 0 0 1H7v4.5a.5.5 0 0 0 1 0V8h4.5a.5.5 0 0 0 0-1H8z"/></svg>
<span class="text-white font-medium">
Portfolio

6
src/routes/etf/[tickerID]/options/+page.svelte
View File

@ -696,7 +696,7 @@
<div class="flex flex-row items-center w-full mt-10">
<select
class="ml-1 w-40 select select-bordered select-sm p-0 pl-5 bg-[#2A303C]"
class="ml-1 w-40 select select-bordered select-sm p-0 pl-5 bg-[#313131]"
on:change={changeTimePeriod}
>
<option disabled>Choose a time period</option>
@ -708,7 +708,7 @@
</select>
<select
class="ml-auto sm:ml-3 w-40 select select-bordered select-sm p-0 pl-5 bg-[#2A303C]"
class="ml-auto sm:ml-3 w-40 select select-bordered select-sm p-0 pl-5 bg-[#313131]"
on:change={changeVolumeOI}
>
<option disabled>Choose a category</option>
@ -808,7 +808,7 @@
{#if activeIdx === 1}
<div class="relative mb-6">
<select
class="w-48 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-[#2A303C]"
class="w-48 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-[#313131]"
on:change={changeStatement}
>
<option disabled>Choose an Expiration Date</option>

2
src/routes/ipos/[slug]/+page.svelte
View File

@ -102,7 +102,7 @@
</div>
<div class="relative mt-4">
<select
class="select text-white select-bordered select-sm w-36 p-0 pl-5 overflow-y-auto bg-[#2A303C]"
class="select text-white select-bordered select-sm w-36 p-0 pl-5 overflow-y-auto bg-[#313131]"
on:change={changeTimePeriod}
>
<option disabled>Select time period</option>

2
src/routes/register/+page.svelte
View File

@ -80,7 +80,7 @@
<!--
<label class="w-full max-w-lg">
<input
class="input input-bordered w-full max-w-lg bg-[#2A303C] whitespace-normal ring-2"
class="input input-bordered w-full max-w-lg bg-[#313131] whitespace-normal ring-2"
type="password"
bind:value={password}
on:input={checkPassword}

8
src/routes/stocks/[tickerID]/financials/+page.svelte
View File

@ -424,7 +424,7 @@
class="cursor-pointer rounded-l-md inline-block w-full text-sm py-1.5 {filterRule ===
'annual'
? 'bg-[#fff] text-black'
: 'bg-[#2A303C] text-white'} font-semibold"
: 'bg-[#313131] text-white'} font-semibold"
aria-current="page"
>
Annual
@ -437,14 +437,14 @@
class="cursor-pointer inline-block w-full py-1.5 text-sm {filterRule ===
'quartely'
? 'bg-[#fff] text-black'
: 'bg-[#2A303C] text-white'} font-semibold rounded-r-md"
: 'bg-[#313131] text-white'} font-semibold rounded-r-md"
>
Quartely
</label>
{:else}
<a
href="/pricing"
class="flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-1.5 bg-[#2A303C] font-semibold text-white rounded-r-md"
class="flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-1.5 bg-[#313131] font-semibold text-white rounded-r-md"
>
<span class="">Quarterly</span>
<svg
@ -568,7 +568,7 @@
<div class="sm:w-full">
<div class="relative">
<select
class="w-36 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-[#2A303C]"
class="w-36 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-[#313131]"
on:change={changeStatement}
>
<option disabled>Choose an Cash Flow Variable</option>

8
src/routes/stocks/[tickerID]/financials/balance-sheet/+page.svelte
View File

@ -509,7 +509,7 @@
class="cursor-pointer rounded-l-md inline-block w-full text-sm py-1.5 {filterRule ===
'annual'
? 'bg-[#fff] text-black'
: 'bg-[#2A303C] text-white'} font-semibold"
: 'bg-[#313131] text-white'} font-semibold"
aria-current="page"
>
Annual
@ -522,14 +522,14 @@
class="cursor-pointer inline-block w-full py-1.5 text-sm {filterRule ===
'quartely'
? 'bg-[#fff] text-black'
: 'bg-[#2A303C] text-white'} font-semibold rounded-r-md"
: 'bg-[#313131] text-white'} font-semibold rounded-r-md"
>
Quartely
</label>
{:else}
<a
href="/pricing"
class="flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-1.5 bg-[#2A303C] font-semibold text-white rounded-r-md"
class="flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-1.5 bg-[#313131] font-semibold text-white rounded-r-md"
>
<span class="">Quarterly</span>
<svg
@ -653,7 +653,7 @@
<div class="sm:w-full">
<div class="relative">
<select
class="w-40 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-[#2A303C]"
class="w-40 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-[#313131]"
on:change={changeStatement}
>
<option disabled>Choose an Income Variable</option>

8
src/routes/stocks/[tickerID]/financials/cash-flow/+page.svelte
View File

@ -452,7 +452,7 @@
class="cursor-pointer rounded-l-md inline-block w-full text-sm py-1.5 {filterRule ===
'annual'
? 'bg-[#fff] text-black'
: 'bg-[#2A303C] text-white'} font-semibold"
: 'bg-[#313131] text-white'} font-semibold"
aria-current="page"
>
Annual
@ -465,14 +465,14 @@
class="cursor-pointer inline-block w-full py-1.5 text-sm {filterRule ===
'quartely'
? 'bg-[#fff] text-black'
: 'bg-[#2A303C] text-white'} font-semibold rounded-r-md"
: 'bg-[#313131] text-white'} font-semibold rounded-r-md"
>
Quartely
</label>
{:else}
<a
href="/pricing"
class="flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-1.5 bg-[#2A303C] font-semibold text-white rounded-r-md"
class="flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-1.5 bg-[#313131] font-semibold text-white rounded-r-md"
>
<span class="">Quarterly</span>
<svg
@ -596,7 +596,7 @@
<div class="sm:w-full">
<div class="relative">
<select
class="w-36 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-[#2A303C]"
class="w-36 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-[#313131]"
on:change={changeStatement}
>
<option disabled>Choose an Cash Flow Variable</option>

8
src/routes/stocks/[tickerID]/financials/ratios/+page.svelte
View File

@ -416,7 +416,7 @@
class="cursor-pointer rounded-l-md inline-block w-full text-sm py-1.5 {filterRule ===
'annual'
? 'bg-[#fff] text-black'
: 'bg-[#2A303C] text-white'} font-semibold"
: 'bg-[#313131] text-white'} font-semibold"
aria-current="page"
>
Annual
@ -429,14 +429,14 @@
class="cursor-pointer inline-block w-full py-1.5 text-sm {filterRule ===
'quartely'
? 'bg-[#fff] text-black'
: 'bg-[#2A303C] text-white'} font-semibold rounded-r-md"
: 'bg-[#313131] text-white'} font-semibold rounded-r-md"
>
Quartely
</label>
{:else}
<a
href="/pricing"
class="flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-1.5 bg-[#2A303C] font-semibold text-white rounded-r-md"
class="flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-1.5 bg-[#313131] font-semibold text-white rounded-r-md"
>
<span class="">Quarterly</span>
<svg
@ -560,7 +560,7 @@
<div class="sm:w-full">
<div class="relative">
<select
class="w-36 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-[#2A303C]"
class="w-36 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-[#313131]"
on:change={changeStatement}
>
<option disabled>Choose an Income Variable</option>

6
src/routes/stocks/[tickerID]/options/+page.svelte
View File

@ -696,7 +696,7 @@
<div class="flex flex-row items-center w-full mt-10">
<select
class="ml-1 w-40 select select-bordered select-sm p-0 pl-5 bg-[#2A303C]"
class="ml-1 w-40 select select-bordered select-sm p-0 pl-5 bg-[#313131]"
on:change={changeTimePeriod}
>
<option disabled>Choose a time period</option>
@ -708,7 +708,7 @@
</select>
<select
class="ml-auto sm:ml-3 w-40 select select-bordered select-sm p-0 pl-5 bg-[#2A303C]"
class="ml-auto sm:ml-3 w-40 select select-bordered select-sm p-0 pl-5 bg-[#313131]"
on:change={changeVolumeOI}
>
<option disabled>Choose a category</option>
@ -812,7 +812,7 @@
{#if activeIdx === 1}
<div class="relative mb-6">
<select
class="w-48 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-[#2A303C]"
class="w-48 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-[#313131]"
on:change={changeStatement}
>
<option disabled>Choose an Expiration Date</option>

6
src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte
View File

@ -595,7 +595,7 @@
class="cursor-pointer rounded-l-lg inline-block w-full py-2.5 text-white {filterRule ===
'annual'
? 'bg-[#fff]'
: 'bg-[#2A303C]'} font-semibold border-r border-gray-600"
: 'bg-[#313131]'} font-semibold border-r border-gray-600"
aria-current="page"
>
Annual
@ -608,14 +608,14 @@
class="cursor-pointer inline-block w-full py-2.5 {filterRule ===
'quarterly'
? 'bg-[#fff]'
: 'bg-[#2A303C]'} font-semibold text-white rounded-r-lg"
: 'bg-[#313131]'} font-semibold text-white rounded-r-lg"
>
Quartely
</label>
{:else}
<a
href="/pricing"
class="flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-2.5 bg-[#2A303C] font-semibold text-white rounded-r-lg"
class="flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-2.5 bg-[#313131] font-semibold text-white rounded-r-lg"
>
<span class="">Quarterly</span>
<svg