{ event.preventDefault(); uploading = true; await uploadReport(); uploading = false; hideFunc(); }} class="reportContainer" >

Submit a Report

What's the reason?

Briefly describe the problem:

<button
            disabled={!reportData.type || reportData.content?.length === 0 || uploading}
            class="submit">Submit</button
        >
        <button type="button" class="exit" aria-label="exit" onclick={hideFunc}
            ><img src={crossUrl} alt="exit" /></button
        >
    </form>
</div>

.reportContainer {
        display: flex;
        flex-direction: column;
        width: 80%;
        gap: 0.5rem;
        padding: 1rem;
        background-color: #182125;
        border-radius: 0.5rem;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
        color: #eaffeb;
        position: absolute;
        translate: 0 -3.5rem;
        border: 2px solid #eaffeb;
    }

.submitHeader {
        width: 80%;
    }
    .reportType {
        width: 100%;
        height: 100%;
        padding: 0.5rem;
        border-radius: 0.5rem;
        border: 2px solid #eaffeb;
        background: none;
        color: #eaffeb;
        font-size: 0.9rem;
        text-align: left;
    }

.reportType option {
        background-color: #2e4653;
        color: #eaffeb;
    }

.submit {
        width: 100%;
        padding: 0.5rem;
        border-radius: 0.5rem;
        border: none;
        background-color: #189f5e;
        color: #ffffff;
        font-size: 1rem;
        cursor: pointer;
    }

.exit {
        position: absolute;
        top: 0.1rem;
        right: 0.1rem;
        background: none;
        border: none;
        cursor: pointer;
    }
</style>